CSS在线字体库，外部字体的引用方法@font-face

时间  2019-11-13
标签 css 在线 字体 外部 引用 方法 font face 栏目 CSS 繁體版
原文   原文链接

@font-face是CSS3中的一个模块，他主要是把本身定义的Web字体嵌入到你的网页中，随着@font-face模块的出现，咱们在Web的开发中使用字体不怕只能使用Web安全字体，大家当中或许有许多人会不天然的问，这样的东西IE能支持吗？当我告诉你们@font-face这个功能早在IE4就支持了你确定会感到惊讶。个人Blog就使用了许多这样的自定义Web字体，好比说首页的Logo，Tags以及页面中的手写英文体，不少朋友问我如何使用，能让本身的页面也支持这样的自定义字体，一句话这些都是@font-face实现的，为了能让更多的朋友知道如何使用他，今天我主要把本身的一点学习过程贴上来和你们分享。javascript

首先咱们一块儿来看看@font-face的语法规则：css

   @font-face {
      font-family: <YourWebFontName>; src: <source> [<format>][,<source> [<format>]]*; [font-weight: <weight>]; [font-style: <style>]; }

取值说明html

一、YourWebFontName:此值指的就是你自定义的字体名称，最好是使用你下载的默认字体，他将被引用到你的Web元素中的font-family。如“font-family:"YourWebFontName";”java

二、source:此值指的是你自定义的字体的存放路径，能够是相对路径也能够是绝路径；css3

三、format：此值指的是你自定义的字体的格式，主要用来帮助浏览器识别，其值主要有如下几种类型：truetype,opentype,truetype-aat,embedded-opentype,avg等；web

四、weight和style:这两个值你们必定很熟悉，weight定义字体是否为粗体，style主要定义字体样式，如斜体。chrome

兼容浏览器api

说到浏览器对@font-face的兼容问题，这里涉及到一个字体format的问题，由于不一样的浏览器对字体格式支持是不一致的，这样你们有必要了解一下，各类版本的浏览器支持什么样的字体，前面也简单带到了有关字体的几种格式，下面我就分别说一下这个问题，让你们内心有一个概念：浏览器

1、TureTpe(.ttf)格式：安全

.ttf字体是Windows和Mac的最多见的字体，是一种RAW格式，所以他不为网站优化,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】；

2、OpenType(.otf)格式：

.otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，因此也提供了更多的功能,支持这种字体的浏览器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】；

3、Web Open Font Format(.woff)格式：

.woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】；

4、Embedded Open Type(.eot)格式：

.eot字体是IE专用字体，能够从TrueType建立此格式字体,支持这种字体的浏览器有【IE4+】；

5、SVG(.svg)格式：

.svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。

这就意味着在@font-face中咱们至少须要.woff,.eot两种格式字体，甚至还须要.svg等字体达到更多种浏览版本的支持。

为了使@font-face达到更多的浏览器支持，Paul Irish写了一个独特的@font-face语法叫Bulletproof @font-face:

   @font-face { font-family: 'YourWebFontName'; src: url('YourWebFontName.eot?') format('eot');/*IE*/ src:url('YourWebFontName.woff') format('woff'), url('YourWebFontName.ttf') format('truetype');/*non-IE*/ }

但为了让各多的浏览器支持，你也能够写成：

   @font-face { font-family: 'YourWebFontName'; src: url('YourWebFontName.eot'); /* IE9 Compat Modes */ src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('YourWebFontName.woff') format('woff'), /* Modern Browsers */ url('YourWebFontName.ttf') format('truetype'), /* Safari, Android, iOS */ url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */ }

说了这么多空洞的理论知识，你们必定有点心痒痒了，那么咱们先来看看W3CPLUS首页中导航部分的兰色字体是如何实现的，假如咱们有一个这样的DOM标签，须要应用自定义字体：

HTML Code:

   <h2 class="neuesDemo">Neues Bauen Demo</h2>

经过@font-face来定义本身的Web Font:

  @font-face { font-family: 'NeuesBauenDemo'; src: url('../fonts/neues_bauen_demo-webfont.eot'); src: url('../fonts/neues_bauen_demo-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/neues_bauen_demo-webfont.woff') format('woff'), url('../fonts/neues_bauen_demo-webfont.ttf') format('truetype'), url('../fonts/neues_bauen_demo-webfont.svg#NeuesBauenDemo') format('svg'); font-weight: normal; font-style: normal; }

我在这里采用的是相对路径，固然你们也可使用绝路径。到这里咱们就须要把定义好的字体应用到咱们实际页面中去：

   h2.neuesDemo { font-family: 'NeuesBauenDemo' }

效果：

看到上面的效果，我想你们会感到@font-face很神奇，同时也想争着作作看，但是一动手才发现，特殊字体我要怎样才能获得，那些.eot,.woff,.ttf,.svg这些字体格式又怎么获取呢？有些朋友可能就不知道如何运手了，那么咱们就带着这些问题来一个全程完成的实例吧：

1、获取特殊字体：

咱们拿下面这种single Malta字体来讲吧：

要获得single Malta字体，不外乎两种途径，其一找到付费网站购买字体，其二就是到免费网站DownLoad字体。固然要给钱的这种傻事我想你们都不会作的，那咱们就获得免费的地方下载，在哪有呢？我平时都是到Google Web Fonts和Dafont.com寻找本身须要的字体，固然网上也还有别的下载字体的地方，这个Demo使用的是Dafont.com的Single Malta字体，这样就能够到这里下载Single Malta：

Single Malta下载下来后，须要把它解压缩出来：

2、获取@font-face所需字体格式：

特殊字体已经在你的电脑中了，如今咱们须要想办法得到@font-face所需的.eot,.woff,.ttf,.svg字体格式。要获取这些字体格式，咱们一样是须要第三方工具或者软件来实现，下面我给你们推荐一款我经常使用的一个工具fontsquirrel,别的先很少说，首跟我点这里进入到下面这个界面吧。

若是你进入页面没有看到上图，你能够直接点击导航:

若是你看到了上面的界面，那就好办了，咱们来看如何应用这个工具生成@font-face须要的各类字体，先把咱们刚才下载的字体上传上去：

上传后按下图所示操做：

如今从Font Squirrel下载下来的文件已经保存在你本地的电脑上了，接着只要对他进行解压缩，你就能看到文件列表以下所示：

你们能够看到，解压缩出来的文件格式，里面除了@font-face所须要的字体格式外，还带有一个DEMO文件，若是你不清楚的也能够参考下载下来的DEMO文件，我在这里不对DEMO说明问题，我主要是给你们介绍如何把下载下来的文件有价值的运用到咱们的项目中。

例如在本身的本地建立了一个fontface项目：

为了让项目结构更清晰，咱们在项目中单首创建一个fonts目录，用来放置解压缩出来@font-face所需的字体格式：

如今@font-face所需字体已经加载到本地项目，如今本地项目中的style.css中附上咱们须要的@font-face样式

   @font-face { font-family: 'SingleMaltaRegular'; src: url('../fonts/singlemalta-webfont.eot'); src: url('../fonts/singlemalta-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/singlemalta-webfont.woff') format('woff'), url('../fonts/singlemalta-webfont.ttf') format('truetype'), url('../fonts/singlemalta-webfont.svg#SingleMaltaRegular') format('svg'); font-weight: normal; font-style: normal; }

到这里为止，咱们已经经过@font-face自定义好所需的SingleMalta字体，离最后效果只差一步了，就是把本身定义的字体应用到你的Web中的DOM元素上：

   h2.singleMalta { font-family: 'SingleMaltaRegular' }

效果：

看到上面的效果，那你们就知道咱们实现成功了。那么关于@font-face帮你打造特殊效果的字体，到这里基本上就完成了，我在这里须要提醒使用者：

一、若是你的项目中是英文网站，并且项目中的Logo，Tags等应用到较多的这种特殊字体效果，我建议你不要使用图片效果，而使用@font-face，可是你是中文网站，我以为仍是使用图片比较合适，由于加载英文字体和图片没有多大区别，可是你加载中文字体，那就不同了，由于中文字体太大了，这样会影响到项目的某些性能的优化；

二、致命的错误，你在@font-face中定义时，文件路径没有载对；

三、你只定义了@font-face，但并无应用到你的项目中的DOM元素上；

以上几点都是在平时制做中常出现的问题，但愿你们能小意一些，另外咱们没有办法在购买全部字体，就算你实力雄厚，那也没有办法在一台服务器主机上放置你全部项目须要的字体。所以我给你们提供几个免费字体下载的网址：Webfonts,Typekit,Kernest,Google Web Fonts,Kernest,Dafont,Niec Web Type,否则你点这里将有更多的免费字体。前面几个连接是帮助你获取一些优美的怪异的特殊字体，但下面这个工具做用更是无穷的大，他能帮你生成@font-face所须要的各类字体，这工具就是Font Squirrel。

最后在提醒一下，使用@font-face别的能够忘了，但Font Squirrel千万不能忘，由于他能帮你生成@font-face所需的各类字体格式。

到此关于@font-face就介绍完了，不知道你们喜欢不喜欢，若是喜欢的话赶快动手实践一下，有Blog的能够立刻运用上去，也能够炫一下。

2014年03月更新——@font-face没法在Firefox下正常工做的解决方案，详细的请点击：http://stackoverflow.com/questions/2856502/css-font-face-not-working-with-firefox-but-working-with-chrome-and-ie

著做权归做者全部。
商业转载请联系做者得到受权,非商业转载请注明出处。
原文: http://www.w3cplus.com/content/css3-font-face © w3cplus.com

 

 

 

 

@font-face{
　　font-family: "本身的字体名字，能够随便起，能够不和字体文件名相同";
　　src: url('下载的字体路径');
}
注意这样只是把字体定义好了，并无应用到任何的元素上。只要在任何的html元素上指定font-family:"本身定义的字体名" 便可。
注意：经本身测试，应用自定义字体时，font-family的值只能写自定义的字体名，不能加其余任何的多于字体或者多于字符，不然没法应用自定义字体！
 
目录：


一： {font-family:serif,sans-serif,fantasy,cursive}表示什么意思

 这是CSS中的五大字体家族。


serif
serif 中文翻译为“衬线字体族”。
serif 具备末端加粗、扩张或尖细末端，或以实际的衬线结尾的一类字体。
能够看出 serif 老是在文字末端作文章，这样作的目的是加强可读性，也就是说在字号比较小的时候，serif 一族的字体仍然是比较好辨认的。
serif 典型的字体有：Times New Roman、MS Georgia、宋体……
serif 还可衍生出两种字体族：petit-serif（小衬线字体族（末端变化不明显））、slab-serif（雕版衬线字体族（末端变化很是明显））。因为显示器显示的字都不大，因此通常将小衬线字体族看做无衬线字体族，好比其中的黑体。

sans-serif
sans-serif 中文翻译为“无衬线字体族”。sans- 前缀是法语，发音为 /san/，意为“无”。
sans-serif 字体比较圆滑，线条粗线均匀，适合作艺术字、标题等，与“衬线字体”相比，若是字号比较小，看起来就会有些吃力。
sans-serif 典型的字体有：MS Trebuchet、MS Arial、MS Verdana、幼圆、隶书、楷体……

cursive
cursive 中文翻译为“手写字体族”。
顾名思义，这类字体的字就像手写的同样。
cursive 典型的字体有：Caflisch Script、Adobe Poetica、迷你简黄草、华文行草……

fantasy
fantasy 中文翻译为“梦幻字体族”。
fantasy 主要用在图片中，字体看起来很艺术，实际网页上用得很少。
fantasy 典型的字体有：WingDings、WingDings 二、WingDings 三、Symbol……

monospace
monospace 中文翻译为“等宽字体族”。
咱们知道英文中各字母是不等宽的，但用 monospace，各个字母就是等宽的了，就能够像中文同样排版了。
monospace 典型的字体有：Courier、MS Courier New、Prestige……

总结
总的来讲字体分为两个大类：serif、sans-serif，这两个大类下又能够分：cursive、fantasy、monospace

 

 

 

 

二： 360和谷歌外部字体

最近，谷歌全面退出中国，谷歌官网域名google.com、谷歌香港google.com.hk都打不开， ping了一下google.com和google.com.hk两个域名的服务器状况，最后ping出来的IP地址均显示为“美国”，也就是说谷歌香港(google.com.hk)的服务器，已由香港转移至美国，因此连接时间会很长，甚至断断续续出现请求超时的状况。

 

这样就是说谷大神在中国再也神不起来了。欲哭无泪的是咱们苦逼的IT啊，谷歌字库不能用了，经网上一番找寻终于在wangzhan.360.cn上给解决了，虽然对360没有什么好感，但其提供的这一套服务仍是至关不错的！

字体库的引用方法：（注：360字体库最近挂掉了，其实早在15年初google就在北京设置了服务器，ping fonts.googleapis.com 也能够发现，ip为203.208.40.136，地址是北京电信海淀区，比360镜像要快不少,因此直接用fonts.googleapis.com便可，没必要用fonts.useso.com）

  1. <link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
(family就等字体名称，空格用+号代替)在页面调用
     
  2. @import url(http://fonts.googleapis.com/css?family=Ubuntu);
(family就等字体名称，空格用+号代替)在样式文件里面调用，如font-family为 Wire One 则 http://fonts.useso.com/css?family=Wire+One
     页面JS调用方法(families就等字体名称，空格用+号代替) 

web字体库的样式调用方法：

样式里面用法：font-family: 'Poiret One', sans-serif;（字体名称）

 

三：（更详细的介绍）

原文连接：  http://www.ibm.com/developerworks/cn/web/1505_zhangyan_googlefont/#icomments

使用 Google Fonts 为网页添加美观字体

在线字体提供丰富多样的字体样式，能使页面更美观，更具吸引力。Google Fonts 就是一个开源的在线字体库，使用起来简单快速。

 

前言

文字是网页中很重要的组成部分。为文字选择一个合适的字体，可以更好的展示一个网站的个性，表达所要传递的信息，同时吸引用户来产生兴趣。

说到字体，咱们首先会想到 CSS 里面的 font，例如：

<html>
<head>
    <style>
        p { font-family: Arial, Helvetica, sans-serif; }
    </style>
</head>
<body>
    <p>some text</p>
</body>
</html>

在这段 HTML 代码中为<p>标签订义了字体，当浏览器解析<p>some text</p>标签时，首先会在系统中查找 Arial 这个字体，若是找不到，就找 Helvetica 字体，若是仍是找不到，就会查找浏览器默认的 sans-serif(非衬线)字体，最后把文字渲染出来。

 

回页首

什么是安全字体

安全字体这个概念，也许不少人都不是很熟悉，咱们先举个例子：

font-family: Arial, Helvetica, sans-serif;

这个对字体（font-family）的定义就是一个安全字体。每种操做系统都有本身默认安装的字体，浏览器只能正常显示操做系统中安装了的字体。而不一样的操做系统默认安装的字体不彻底相同，有的甚至名称都不同，在这种状况下，咱们必须定义安全字体，使字体在全部的浏览器中都可以正常显示。

在上面这个 font-family 的定义中，咱们选择 Arial 做为首选字体（注：Arial 字体是最经常使用的 sans serif 字体，也是 Windows 的默认字体，当字体很小是不容易阅读），可是，苹果系统中没有这个字体，因此咱们选择 Helvetica（和 Arial 很类似）做为第二备选字体，最后咱们选择 sans-serif 做为第三备选字体，若是在一个既没有 Arial 也没有 Helvetica 的系统里，那么浏览器会使用默认的 sans-serif 字体来渲染文字。这样，咱们很大程度上保证了使用不一样操做系统的访问者都能看到相同（至少是相似）的页面文字。

除了 Arial，常见的安全字体还有：

  • Verdana 字体，它是微软公司的核心字体之一，专门为屏幕显示而开发的。它的应用普遍，宽度大而易于阅读，是显示器中最清晰的字体。CSS 写法：font-family: Verdana, Geneva, sans-serif;
  • Times New Roman 字体，它是最经常使用的 serif 字体，是浏览器默认的字体。小号字的易读性也不好。CSS 写法：font-family: 'Times New Roman', Times, serif;

有兴趣的读者能够经过这个连接来查阅经常使用的安全字体。http://www.w3schools.com/cssref/css_websafe_fonts.asp

在网页开发中，应该尽可能使用安全字体，也就是高度通用的字体，这样，访问者才能流畅的阅读网页的全部内容。

可是，网页设计师必定不会知足于使用这些安全字体，如何才能使用漂亮的字体，并能在普通用户的浏览器中被正确的渲染出来？答案是：使用@font-face 方案。

 

回页首

@font-face 标签简介

@font-face 被列为了 CSS3 的一项新特性，其实它并非什么新鲜技术，它最先出如今 CSS2 的规范定义中，可是在 CSS2.1 中又被删除，如今被正式列入 CSS3。目前主流的浏览器（IE 4+/Firefox 3.5+/Chrome 1+/Safari 3.1+/Opera 10+）都可以支持这个属性，因此不用担忧会有浏览器兼容性问题。

@font-face 容许您在网页中使用电脑中没有安装的字体，彻底摆脱安全字体的限制。只需将字体包安装在服务器上，当用户加载网页时，字体包会自动下载到用户机器上，保证字体可以正确渲染。

随着@font-face 的不断流行，产生了许多新的字体格式图标集，称为网络字体。Google Fonts API 就是基于@font-face 的特性开发的一套优秀的网络字体库。

网络字体的优势有不少：

  1. 使用的是真正的文本，而不是图片，放大和缩小都不会影响渲染效果，用户体验好；
  2. 能够被搜索引擎辨认；
  3. 不像图片每次须要从新生成，添加删除更方便。
 

回页首

如何使用 Google Fonts API

Google Fonts 提供了超过 600 种的高质量的字体，全部的浏览器都兼容，无需引入 JavaScript，简单易用，更重要的是，免费。（虽然，暂时不支持中文字体，由于中文字体库实在是太大了）。

如今来看下，如何在网页中使用 Google Fonts。

挑选字体

登陆Google Fonts （谷歌字体官方网站）。（图 1）

图 1.Google Fonts 主页

在主页中，您能够直接浏览全部的字体，能够按单个词语来查看，或者按句子段落来查看总体效果，还能够调整字体大小。若是您对字体分类比较熟悉，就可使用左边的搜索条件对字体做筛选。找到您喜欢的字体以后，点击"Add to Collection"按钮，而后在网页下方的"Collection"中便可找到您添加的全部字体。

使用选中的字体来测试您的文字

在上一页面（图 1）的"Collection"中，点击"review"。在预览页面中（图 2），输入您的测试文字，来查看效果。另外在"review"页面上，您还能够调整其它的与字体相关的样式，好比字体大小，间隔，变换，等等。在图 2 中，咱们选择测试的是"Condiment"字体

图 2.Google Fonts 预览页面

在您的网页中添加字体连接。

若是确认使用该字体， 在网页下方的"Collection"中，点击"Use"按钮，在接下来的页面中，您将看到详细的说明，包括字体连接和如何将字体添加到您的网页中。

有三种方式来添加字体连接：

  • Standard 方式： 
    <link rel='stylesheet' type='text/css'
href='http://fonts.googleapis.com/css?family=Condiment'>
  • @import 方式： 
    @import url(http://fonts.googleapis.com/css?family=Condiment);
  • JavaScript 方式：

    （经过添加动态脚本并执行来导入字体，代码省略）

下一步定义在那个标签上使用该字体，例如：在<class="myheader">标签上使用，

.myheader {font-family: 'Condiment', cursive;}

大功告成，您如今能够打开您的网页欣赏一下了(图 3)。

图 3.测试页面效果
清单 1.测试页面代码
<html>
          <head>
                     <link rel="stylesheet" type="text/css"           
                               href='http://fonts.googleapis.com/css?family=Condiment'>
                    <style>
                             .myheader {
                                        font-family: Condiment, cursive;
                                        font-size: 48px;
                                        text-align: center;
                               }
                    </style>
          </head>
          <body>
                     <div class="myheader"> Test my own text !</div>
          </body>
</html>

优化字体包加载

若是您不是大范围的在网页中使用 Google 字体，只是在标题或 logo 里使用，那么能够在 url 里添加 text 参数，来限制加载的字体包的大小，最高能缩减 90%左右的大小，以此来节约下载流量。例如：http://fonts.googleapis.com/css?family= Condiment'&text=Hello

这样，您只会下载 h，e，l，o 这四个字母的字体，大大缩小了字体包的大小。

下载字体包

您还能够把字体包下载并安装到本地，这样您就能够在本地使用这些字体，好比在 Notepad，Microsoft Office 里。

方法为：在图 3 中，点击下载按钮， 选择"Download the font families in your Collection as a zip file"

高级应用 API

Google Fonts 还开放了一些接口（称为 Developer API），用于获取字体库的信息数据。

好比实时获取字体库实际可用的字体及其相关信息：

https://www.googleapis.com/webfonts/v1/webfonts?key=YOUR-API-KEY

这个请求的返回结果是一个 JSON 类型的数据，包括了每种字体的名称，样式种类（好比 regular，italic），版本，修改时间，包含的样式包的请求地址，等等。

请注意，在 URL 里面有一个 key，这个 key 是和您的 web 应用工程相联系的，只有注册过的 web 应用才能成功调用 Developer API。咱们必需要在 Google Cloud Console 注册以后，才能获取这个 key。

关于这个 Developer API， 能够参阅这个连接。

 

回页首

结束语

Google Fonts 很强大，可是也碰到一些加载的问题，最好仍是字体声明的时候，在最后添加一个安全字体，来保证万无一失。另外的一个建议是，在网页中要适量的使用花样的字体，让整个页面保持干净简洁。

 

四： 关于＠font-face具体用法

1 http://www.w3cplus.com/content/css3-font-face  

2 http://www.jb51.net/web/89797.html

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程