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

财产。

当然，并非所有浏览器的行为都符合规范。诸如IE之类的某些浏览器将尝试下载尽可能多的字体，或者以意外的方式解析规则。请参阅评论以获取更多信息和研究。

CSS已被设计为通过这种顺序方法来帮助最大程度地减少加载时间和请求数量。如果您的字体花费太长时间无法从您自己的服务器接收，请考虑使用快速的CDN，例如Google Web Fonts，Typekit或Adobe Edge。

CSS字体-何时使用多个src描述符

1 个答案: