什么时候下载了后备字体？

Question

如果我将Google字体设置为后备字体，如下所示：

@font-face {
    font-family: 'GoogleFont';
    src: url('GoogleFont.ttf');
}

html, body {
    font-family: 'myMainFont', 'GoogleFont';
}

如果主字体失败，Google字体是否只会下载到用户的浏览器？

Answer 1

编辑

根据规范，@ font-face字体只应在需要呈现文档时下载： http ： //www.w3.org/TR/css3-fonts/#font-face-loading

@ font-face规则旨在允许延迟加载仅在文档中使用时下载的字体资源。 样式表可以包括@ font-face规则，用于仅使用选择集的字体库; 用户代理只能下载适用于给定页面的样式规则中引用的那些字体。 下载@ font-face规则中定义的所有字体而不考虑这些字体是否实际在页面中使用的用户代理被认为是不符合要求的。 如果在字符回退情况下可能下载字体，则用户代理可以下载字体，如果它包含在给定文本运行的'font-family'的计算值内。

注意：在撰写此答案时，各种系统上的不同版本的浏览器似乎以不同的方式实现此行为。 我们所能做的就是希望它们最终符合规范。

Chrome和Firefox（正在测试其他正在进行的操作）只会下载呈现正在显示的内容所需的字体，无论是通过@ font-face指定的内容。 更重要的是，如果您指定@ font-face字体然后不使用它，例如

 
 
 
  
  .css-rule { font-family: Helvetica,'My at-font-face-font',sans-serif; }
 
  

然后，您的自定义字体 将不会被下载，因为它不需要。

要检查正在下载的字体以及何时下载，请在页面加载期间打开网络选项卡。

编辑

浏览器的行为似乎在这个问题上差别很大，我鼓励更多地关注您的个人情况。

但是，我可以 保证一件事，并不是所有字体都会在所有浏览器中一直下载，只是因为你已经通过 @font-face声明了它们。

Answer 2

否：浏览器实现方式各不相同，因此您无法相信字体将被忽略（即使不需要它们）。

客户端的操作系统，浏览器和版本都会导致变体性能 - 浏览器可能提供的其他设置也是如此。 请参阅Adam关于W3“规则”的浏览器合规性的答案 。

检查在此处和此处在不同浏览器中下载的资源，以查看字体的处理方式。

---

话虽如此 ， 根据MDN文档 ，如果您在@font-face src属性中指定多个文件，则可以获得正在寻找的“后备”行为：

@font-face {
  font-family: MyFontName;
  src: url("MyMainFont.tff"), url("MyBackupFont.ttf");
}

在此示例中 ，如果找不到第一个文件，那么我们继续沿着src列表继续，直到找到有效文件。 因此，只有在MyMainfont.tff才会下载MyBackupFont.tff 。 您还可以使用local("FontName")在src指定本地文件。

---

顺便说一下， 克里斯有一篇关于如何“负责任地使用[@ font-face]”的文章 。