CSS学习笔记：@font-face

概述

@font-face规则允许开发者为网页指定在线字体。

@font-face是连接服务器上的字体的一种方式，浏览器会根据这条指令把对应的字体文件下载到本地缓存，使用它去显示文本。通过这种方式可以消除对用户电脑字体的依赖。

@font-face 不仅可以放在在CSS的最顶层, 也可以放在 @规则 的 条件规则组 中。

语法

@font-face的取值有以下几个：

• font-family：设置文本的字体名称。之后可以在定义字体的字体栈中使用这个名称。
• font-style：设置文本样式
• font-variant：设置文本是否大小写
• font-weight：设置文本的粗细
• font-stretch：设置文本是否横向拉伸变形
• font-size：设置文本字体大小
• src：设置自定义字体的相对路径或者绝对路径。
  注意：此属性只能在@font-face规则里使用。

@font-face {
      font-family: "Bitstream Vera Serif Bold";
      src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
    }

浏览器支持度

不同的浏览器会要求不同的字体文件类型。

• TrueType（TTF）和OpenType（OTF）字体文件在绝大多数的浏览器上都能正常工作。
• IE4—IE8要求使用特殊的字体文件格式：嵌入式OpenType（EOT）
• 唯一能够在Safari上正常工作的字体文件格式就是SVG，SVG在chrome、Opera上也能正常工作，但在Firefox上不行。
• WOFF的含义是Web开放字体格式。越来越多的浏览器都在添加对它的支持。

这些字体格式中的一些能够互相转换。
一般在font-face中都引入各个类型的字体文件以适配所有浏览器。

使用

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url("../fonts/glyphicons-halflings-regular.eot");
  src: url("../fonts/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"), 
  url("../fonts/glyphicons-halflings-regular.woff2") format("woff2"),
  url("../fonts/glyphicons-halflings-regular.woff") format("woff"), 
  url("../fonts/glyphicons-halflings-regular.ttf") format("truetype"), 
  url("../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg");}

首先声明了引入字体的名称。
然后src定义了字体文件路径：

• 首先为ie8及以前的版本指明了EOT版本的字体文件路径。这个声明和其他声明分开的原因是因为IE浏览器无法理解在src中使用逗号来分割的多个值。
• 第二个src值列出了针对非IE浏览器的所有字体文件。
  
  • 每个浏览器都会扫描这个字体文件列表，直到找到一个合适的字体文件为止，然后它就会下载文件，也只有下载下来的文件才会显示成文本。
  • 每个字体文件声明都包括一个字体文件的路径，以及格式的提示，如format(“woff”)。格式提示是可选的，但包含这个的话能够提醒浏览器每个字体文件的具体格式，能避免浏览器下载不能使用的文件。

所有的浏览器，除了IE8及以前的版本之外，在CSS规则的字体定义中真正使用这个字体之前，是不会做任何下载的。这意味着你可以在样式表中声明大量的@font-face规则，只要你的页面中并没有什么地方实际使用到这些字体，浏览器就不会发起一个额外的HTTP请求下载字体。
相反地，IE8及之前版本的浏览器只要遇到EOT文件的声明就会下载他。

• woff字体放在最前面是因为它是标准，我们希望浏览器如果支持的话会首先使用它。它同样也是尺寸最小的格式，因此最好让浏览器首先识别并使用它。

• 在src中有时会有local（）的用法。它的用途是在@font-face中指定用户机器上本地安装的字体版本。因此如果用户已经安装了和你嵌入的字体一样的版本，就无需额外下载文件了。

• 指定font-weight的话，如果其font-family的名字和其他@font-face指定的名字相同，同时指定了bold或其他粗细度，那么在使用粗体字的时候就会使用当前声明字体。

@font-face {
    font-family: myFirstFont;
    src: local("Times New Roman");
    font-weight:normal;
}

@font-face {
    font-family: myFirstFont;
    src: local(Consolas);
    font-weight:bold;
}

在这里，粗体字就会使用Consolas，而正常粗细的字采用字体Times New Roman。

---

在CSS中添加@font-face并不会实际上使用某种字体，它只是简单链接了这些字体，使你在需要使用它们的时候可以下载并使用。
要真正使用的话就是像别的字体一样添加到font或font-family声明的字体栈中。

性能

由于字体的下载，可能会造成滞后的效果。
对于非西方语言的字体，如中文或日文，包含成千上万的字符，大小通常会按兆来计算。这些巨大的字体文件一般会花费很长的时间下载。
有很多方法可以减少这种等待：

• 保持字体文件尽可能小。
• 把@font-face规则放在CSS的最上方，这会增加字体文件优先加载的几率，比如它就可能比背景图片更早加载。
• 让浏览器尽快启动字体文件的加载。比如在页面开始处的隐藏元素里面就请求对字体的使用。有很多图片预加载技术可以应用到字体文件上。
• 将HTTP缓存的超时设置的很长，这样能保证字体文件只被下载一次。浏览器会缓存这个字体文件，并且很长时间之内不再发送请求。这对页面的第一次访问没有任何帮助，但对后续的请求还是很有好处的。
• 使用Gzip压缩字体文件。