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。

Answer 2

要回答这个问题，我引用了以下 W3C 文件中的相关段落：

CSS Fonts Module Level 3
W3C候选人推荐2013年10月3日

（在引用的材料中，请注意我强调那些与问题最相关的句子。）

4.1 The @font-face rule

@font-face规则允许链接到需要时自动提取和激活的字体。这允许作者选择与给定的设计目标紧密匹配的字体页面而不是将字体选择限制为一组可用的字体在给定的平台上。一组字体描述符定义了它的位置字体资源，无论是本地还是外部，以及样式个人面孔的特征。多个@font-face 规则可用于构造具有各种面的字体系列。 使用CSS字体匹配规则，用户代理可以选择性地仅下载给定文本所需的那些面。

4.3 Font reference: the src descriptor

此描述符指定包含字体数据的资源。它是   @font-face规则有效所必需的。它的价值是   优先，逗号分隔的外部引用列表或   本地安装的字体名称。当用户需要字体时   agent使用第一个迭代列出的引用集   它可以成功激活。 包含无效数据或本地数据的字体   将忽略未找到的字体面，并且用户代理将加载   列表中的下一个字体。

...

外部引用由URL组成，后跟可选提示   描述该URL引用的字体资源的格式。该   format提示包含以逗号分隔的格式字符串列表   表示众所周知的字体格式。必须跳过符合条件的用户代理   如果格式提示仅指示，则下载字体资源   不支持或未知的字体格式。如果没有提供格式提示，   用户代理应下载字体资源。
    /* load WOFF font if possible, otherwise use OpenType font */
    @font-face {
      font-family: bodytext;
      src: url(ideal-sans-serif.woff) format("woff"),
           url(basic-sans-serif.ttf) format("opentype");
    }

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

2 个答案: