29

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

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

4

2 回答 2

29

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

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

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

CSS 已经被设计为通过这种顺序方法帮助最小化加载时间和请求数量。如果您的字体需要很长时间才能从您自己的服务器到达，请考虑使用快速 CDN，例如 Google Web Fonts、Typekit 或 Adob​​e Edge。

于 2012-11-28T16:04:28.210 回答
1

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

CSS 字体模块第 3 级
W3C 候选推荐 2013 年 10 月 3 日

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

4.1@font-face规则

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

4.3 字体参考：src描述符

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

...

外部引用由一个 URL 组成，后跟一个可选的提示，描述该 URL 引用的字体资源的格式。格式提示包含以逗号分隔的格式字符串列表，这些格式字符串表示众所周知的字体格式。如果格式提示仅指示不受支持或未知的字体格式，则符合标准的用户代理必须跳过下载字体资源。如果没有提供格式提示，用户代理应该下载字体资源。

    /* 如果可能，加载 WOFF 字体，否则使用 OpenType 字体 */
    @字体脸{
      字体系列：正文；
      src: url(ideal-sans-serif.woff) 格式("woff"),
           url(basic-sans-serif.ttf) 格式("opentype");
    }
于 2017-08-22T15:52:22.113 回答