CSS font-face - 何时使用多个 src 描述符

Question

假设我声明了一个自定义字体，如下所示:

@font-face {
    font-family: "Avenir Next";
    src: local("Avenir Next"),
    url('./fonts/avenir-next-bold.woff2') format('woff2'),
    url('./fonts/avenir-next-bold.woff') format('woff');
}

我什么时候应该使用多个 src 描述符，而不是只使用一个？

例如，我在网上找到了这个使用2个src描述符的例子。为什么它使用 2 而不是 1？

@font-face {
  font-family: FontName;
  src: url('path/filename.eot');
  src: url('path/filename.eot?#iefix') format('embedded-opentype'),
    url('path/filename.woff2') format('woff2'), 
    url('path/filename.woff') format('woff'),
    url('path/filename.ttf') format('truetype');
}

Answer 1

CSS font-face -when to use multiple src descriptors

典型的浏览器应该尝试从列表中的第一个开始，根据它支持的格式，逐个加载列表中的字体。一旦获得可以使用的字体文件，它就不会尝试加载列表中的任何其他文件。如果浏览器不支持特定格式，则永远不要尝试加载该字体；它应该直接移动到下一个源并查看它。

这类似于浏览器在中使用字体堆栈的方式

font-family

属性(property)。

当然，并非所有浏览器的行为都符合规范。某些浏览器(如 IE)会尝试下载尽可能多的字体或以意想不到的方式解析规则；查看评论以获取更多信息和研究。

CSS 的设计初衷是通过这种顺序方法帮助最大限度地减少加载时间和请求数量。如果您的字体从您自己的服务器到达所需的时间太长，请考虑使用快速 CDN，例如 Google Web Fonts、Typekit 或 Adob​​e Edge。