浏览器是否对@font-face 包含的未使用字体发出请求？
Rob*_*ier 4 css fonts webfonts
题
浏览器是发出请求并下载声明指定的所有文件@font-face还是仅下载在整个样式表中引用的文件？
例子
假设我有 3 个@font-face声明：
@font-face {
font-family: 'A';
src: url('http://fonts.com/font-a.woff2') format('woff2');
}
@font-face {
font-family: 'B';
src: url('http://fonts.com/font-b.woff2') format('woff2');
}
@font-face {
font-family: 'C';
src: url('http://fonts.com/font-c.woff2') format('woff2');
}
然后我所有的风格是：
body {
font-family: 'A';
}
h1 {
font-family: 'B';
}
C浏览器是否会请求字体？它是否在规范中的某处标准化？
是的- 在某些旧浏览器（例如 IE8 及更早版本）上请求未使用的字体。
然而，今天几乎所有的现代浏览器都不会对未使用的导入提出额外的请求。https://css-tricks.com/preventing-the-performance-hit-from-custom-fonts/
考虑importing这些来自谷歌的字体Lato，Roboto和Raleway
@font-face {
font-family: 'A';
src: url('https://fonts.googleapis.com/css?family=Lato');
}
@font-face {
font-family: 'B';
src: url('https://fonts.googleapis.com/css?family=Roboto');
}
@font-face {
font-family: 'C';
src: url('https://fonts.googleapis.com/css?family=Raleway');
}
body {
font-family: 'A';
}
h1 {
font-family: 'B';
}
并使用以下 HTML 标记
<body>
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolar sit amet</p>
</body>
您可以在开发人员工具中检查浏览器发出的请求，例如在 Google Chrome 中，按下F12并打开网络选项卡。
请注意，虽然是在 CSS 文件中导入的，但只有Roboto和Lato被请求Raleway。
- 谢谢。尽管在引用中包含了 css-tricks 文章的链接，但看起来该引用来自该文章。我找不到那篇文章中引用的文字。我发现这篇文章中唯一确认这一点的文字是“我看到的第一个想法是 Dave Rupert 的测试，仅在大屏幕上加载 `@font-face`。事实证明，如果您使用 `@font-face` 但不使用一旦应用了‘font-family’，该字体就不会被下载。非常聪明，浏览器。” (2认同)
| 归档时间： |
|
| 查看次数： |
1124 次 |
| 最近记录： |