css – 如果多个来源列在@ font-face中,那么它们都是在客户端上加载的？

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

@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的最佳方式吗？是否有其他策略来减少用户的加载时间？

解决方法

典型的浏览器应该尝试逐个加载列表中的字体,具体取决于它支持的格式,从列表中的第一个开始.一旦它获得可以使用的字体文件,它不会尝试加载列表中其余的任何文件.如果浏览器不支持特定格式,则不应尝试加载该字体;它应该直接转到下一个来源,并看看.

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

当然,并不是所有的浏览器都符合规格.像IE这样的浏览器会尝试下载尽可能多的字体,或以意想不到的方式解析规则;看到更多信息和研究的意见.

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