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规则只使用选择集;用户代理必须只下载那些适用于a的样式规则中引用的字体给定页面。下载@ font-face中定义的所有字体的用户代理不考虑这些字体是否实际使用的规则页面被视为不符合要求。在字体可能的情况下在角色后备情况下，用户代理可以下载一个字体，如果它包含在'font-family'的计算值中给定的文本运行。

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

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

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

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

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

修改

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

~~但是，我可以保证一件事，并不是所有字体都会在所有浏览器中一直下载，只是因为你已经通过{{ 1}}~~

Answer 2

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

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

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

据说，according to the MDN documentation如果您在{{1}中指定多个文件，可以拥有您正在寻找的“后备”行为} @font-face属性：

src

在this example中，如果找不到第一个文件，那么我们继续向下@font-face { font-family: MyFontName; src: url("MyMainFont.tff"), url("MyBackupFont.ttf"); }列表，直到找到有效文件。因此，只有在找不到src时才会下载MyBackupFont.tff。您还可以使用MyMainfont.tff在<{1}}中指定本地文件。

顺便说一句Chris has a great article如何“负责任地使用[@ font-face]。”

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

2 个答案: