如果@ font-face中列出了多个源,那么它们都在客户端加载吗？

Question

我正在寻求优化我的网站的速度,并想知道浏览器只会从以下代码或所有字体文件加载他们需要的文件:

@font-face {
    font-family: 'Proxima Nova';
    src: url('proximanova-regitalic-webfont.eot');
    src: url('proximanova-regitalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('proximanova-regitalic-webfont.woff') format('woff'),
         url('proximanova-regitalic-webfont.ttf') format('truetype'),
         url('proximanova-regitalic-webfont.svg#proxima_nova_rgitalic') format('svg');
    font-weight: normal;
    font-style: italic;
}

另外,这是做@ font-face的最佳方式吗？是否有其他策略可以减少用户的加载时间？

Answer 1

典型的浏览器应该尝试逐个加载列表中的字体,具体取决于它支持的格式,从列表中的第一个开始.一旦获得可以使用的字体文件,它就不会尝试加载列表中的任何其他文件.如果浏览器不支持特定的格式,它应该永远不会试图载入字体; 它应该直接进入下一个源并观察它.

这类似于浏览器在font-family属性中使用字体堆栈的方式.

当然,并非所有浏览器都符合规范.像IE这样的浏览器会尽量下载尽可能多的字体,或以意想不到的方式解析规则; 请参阅评论以获取更多信息和研究.

CSS已经设计为通过这种顺序方法帮助最小化加载时间和请求数量.如果您的字体花费的时间太长而无法从您自己的服务器到达,请考虑使用快速CDN,而不是Google Web Fonts,Typekit或Adobe Edge.