代码之家 › 专栏 › 技术社区 › mowgli

何时下载回退字体?

font-face css html

mowgli · 技术社区 · 10 年前

如果我将Google字体设置为回退字体,如下所示:

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

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

如果主字体出现故障,谷歌字体是否只会下载到用户的浏览器?

2 回复 | 直到 10 年前

Adam Jenkins 10 年前

编辑

根据规范,@font face字体只能在渲染文档时下载: http://www.w3.org/TR/css3-fonts/#font-face-loading

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

注: 在撰写这个答案时,不同系统上不同版本的浏览器似乎对这种行为的实现有很大的不同。我们所能做的就是希望它们最终符合规范。

Chrome和Firefox(正在测试其他浏览器)将只下载渲染所显示内容所需的字体,而不管通过@font face指定了什么。更重要的是,如果您指定了@font face字体,然后不使用它,例如。

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

然后你的自定义字体 不会的 因为不需要下载。

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

编辑

在这个问题上,浏览器的行为似乎有很大的不同,我鼓励更多地了解您的个人情况。

我可以保证然而,有一点是,并不是所有的字体都可以在所有的浏览器中下载,只是因为您通过 @font-face .

Community Stefan Steinegger 7 年前

否:浏览器实现不同,所以你不能相信字体会被忽略(即使不需要)。

客户端的操作系统、浏览器和版本都会导致不同的性能——浏览器可能提供的其他设置也是如此。看见 Adam's answer 关于W3“规则”的浏览器兼容性

检查浏览器中下载的资源 here 和 here 在不同的浏览器中查看如何处理字体。

有人这么说 , according to the MDN documentation 你可以如果在 @font-face src 属性:

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

在里面 this example ,如果找不到第一个文件,则继续 钢筋混凝土 直到找到有效文件。因此 MyBackupFont.tff 仅在以下情况下下载 MyMainfont.tff 找不到。还可以在 钢筋混凝土 通过使用 local("FontName") .

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