CSS3 @font-face规则

多年以来，人们一直被迫使用一组单调乏味的Web安全字体。当网页中需要使用一些优雅的字体时，设计师最常用的办法，就是把文字做成图片。但是，由于图片难以修改，也不利于网站SEO，因此不可能大范围使用该字体。

值得庆幸的是，CSS3的 @font-face 为设计师打开了一个全新的世界，它提供了一种自定义网页字体的方法，使设计师可以大胆使用任意自己想要的字体。

事实上，@font-face规则在CSS2中就已经存在，但随后在CSS2.1中被删除。真的，不骗你，早在1998年，IE4就对它提供了部分支持。现在，它又回来了，已经被重新引入到CSS3的字体模块中！

@font-face是一个CSS功能，它允许网页中使用自定义的网络字体，这些自定义的字体被放置在服务器上，从而摆脱对访问者计算机上字体环境的依赖。

简单的说，有了@font-face，只需将字体上传到服务器端，无论访问者计算机上是否安装该字体，网页都能够正确的显示。

@font-face 能够让加载服务器端的字体，并让浏览器找到对应的字体，得益于一套成熟的语法规则：

1. @font-face {
2. font-family: <fontName>;
3. src: <source> [<format>][,<source> [<format>]]*;
4. font-style: <style>;
5. font-weight: <weight>;
6. }

其中，font-family 属性用来指定网络字体的名称，它可以是任意的字符串，建议最好使用字体本身的名称。font-* 属性分别表示该网络字体的风格和粗细。source 属性用来指定网络字体文件的存放路径，可以是相对路径或绝对路径；formart 属性用来指定网络字体的格式字符串，不同格式字符串对应的字体格式和后缀名见表 3‑2：

表 3-2 字体的格式字符串及后缀名

格式字符串	字体格式	后缀名
"woff"	WOFF 格式	.woff
"truetype"	TrueType格式	.ttf
"opentype"	OpenType格式	.ttf, .otf
"embedded-opentype"	Embedded OpenType格式	.eot
"svg"	SVG Font格式	.svg, .svgz

要在网页中使用自定义的网络字体，必须先将字体文件上传到服务器的某个地方，然后，再使用 @font-face 规则定义网络字体。

定义网络字体时，font-family 和 src  都是必需的属性，通过 font-family 指定字体的名称，通过  src  指定字体资源文件的存放路径：

1. @font-face {
2. font-family: DroidSans;
3. src: url(DroidSans.woff);
4. }

上述代码定义了一个网络字体，字体名称为DroidSans，字体文件为DroidSans.woff，并与CSS文件保存在相同目录中。

不过，这里定义的字体并不会有任何实际效果，因为还没有真正将它应用到网页中。要将网络字体 DroidSans 应用到网页中，还需在CSS选择器中，将 font-family 属性的值设置为 @font-face规则中定义的字体名称。如：

1. h1 {
2. font-family: DroidSans;
3. }

定义网络字体后，页面上任何引用该字体的元素，都将按该规则来渲染文本。因此，页面上的所有 h1 标题，都将使用自定义的DroidSans字体进行渲染。并且，对于 h1 标题，浏览器默认还会使用粗体显示。

然而，此时呈现的粗体，并不是真正的粗体，而是伪粗体，这是因为一个网络字体文件只对应一种风格、一种粗细。因此，要使用真正的粗体，还需要单独创建一个@font-face规则，在该规则中对 font-family 进行重命名，并提供粗体对应的字体文件，同时将 font-weight 属性设置为 bold：

1. @font-face {
2. font-family: DroidSans_bold;
3. src: url(DroidSans_bold.woff);
4. font-weight: bold;
5. }

同理，如果要使用斜体加粗体，还要单独创建另一个@font-face规则，并提供粗斜体对应的字体文件，同时将 font-style 属性设置为 italic，font-weight 属性设置为 bold。当然，如果某种Web 字体没有粗体、斜体、或粗斜体版本，而我们又对文本添加了这些样式，浏览器就会显示伪样式。

一个现实的问题是，虽然具有许多不同格式的Web字体，但各种浏览器仅支持这些格式的不同子集。因此，为了得到更多浏览器的支持，一个折中的办法是提供多种字体，并在@font-face规则中定义多个url，中间用逗号隔开。如果浏览器无法识别第一个字体，它会依次尝试后面的字体，直到找到一个可用的字体为止。如，下面的写法几乎可以让所有浏览器都有一个可用的字体：

1. @font-face {
2. font-family: 'webFont';
3. src: url('webFont.eot'); /* IE9 兼容模式*/
4. src: url('webFont.eot?#iefix') format('embedded-opentype'), /* IE6~IE8 */
5. url('webFont.woff') format('woff'), /* 现代浏览器 */
6. url('webFont.ttf') format('truetype'), /* Safari, Android, iOS */
7. url('webFont.svg#svgFontName') format('svg'); /* Legacy iOS */
8. }

当然，需要注意的是，字体文件可能比较大，并且每增加一个样式和粗细版本都会引入一个新的字体文件，每个文件都需要额外的HTTP请求，从而影响性能。所以，在使用网络字体前，需要仔细斟酌，判断是否真的有必要在自己的网站上使用它，以及如何正确使用它。

除了将网络字体应用于文本外，还可以使用网络字体在网页上绘制图标。网上有很多字体图标资源，比如在Bootstrap中，可以使用Glyphicon Halflings 或Font Awesome等字体图标。

下面以Glyphicon Halflings 字体为例，来说明一下如何在网页中使用字体图标。假设在网页上有 5 个span 元素，使用Glyphicon Halflings字体，在每个 span 元素中生成一个播放器按钮图标：

1. <span></span><span></span><span></span><span></span><span></span>

首先，下载Glyphicon Halflings的字体文件。Glyphicons Halflings 一般是收费的，但他们的作者允许 Bootstrap 免费使用（向作者致敬）。因此，可以从Bootstrap官网下载编译后的Bootstrap版本，在 fonts 目录中就包含四种格式的Glyphicon Halflings字体文件。

然后，在CSS中，通过@font-face规则定义网络字体，并在 span 元素中使用该字体。同时，根据网站的配色风格，设定合适的文本颜色：

1. @font-face {
2. font-family: 'Glyphicons Halflings';
3. src: url('bootstrap/fonts/regular.eot');
4. src: url('bootstrap/fonts/regular.eot?#iefix') format('embedded-opentype'),
5. url('bootstrap/fonts/regular.woff') format('woff'),
6. url('bootstrap/fonts/regular.ttf') format('truetype'),
7. url('bootstrap/fonts/regular.svg#regular') format('svg');
8. }
9. span {
10. color: #444;
11. font-family: 'Glyphicons Halflings';
12. }

字体图标的原理，基本都是使用字符或实体字符来生成字体图标。因此，就可以使用伪元素，在元素的前面或后面，插入特定的字符或实体字符，就能得到相应的图标。不同的字体，插入的字符可能不同，Glyphicon Halflings字体中，播放器按钮对应的字符如下：

1. span:nth-child(1):before {
2. content: "\e069";
3. }
4. span:nth-child(2):before {
5. content: "\e071";
6. }
7. span:nth-child(3):before {
8. content: "\e072";
9. }
10. span:nth-child(4):before {
11. content: "\e075";
12. }
13. span:nth-child(5):before {
14. content: "\e077";
15. }

就这么简单，运行结果如图 3‑10 所示：

图3-10 字体图标

使用字体图标的好处是，如果要改变网站的配色风格，只需修改字体的颜色即可，非常方便。如果使用图像，要重新制作所有图标，非常麻烦。并且，字体图标还可以自由缩放而不会失真，而图像在缩放时可能会失真。

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。