浏览器是否对@font-face 包含的未使用字体发出请求？

Question

问题

浏览器发出请求并下载所有由@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 是否会被浏览器请求？它是否在规范中的某处标准化？

Answer 1

是 - 一些旧浏览器需要未使用的字体，例如IE8 及更早版本。

然而，如今几乎所有现代浏览器都不会对未使用的导入发出额外请求。 https://css-tricks.com/preventing-the-performance-hit-from-custom-fonts/

考虑 importing 来自 Google、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 并打开网络选项卡。

请注意，尽管 Raleway 已导入到 CSS 文件中，但仅请求了 Roboto 和 Lato。

浏览器是否对@font-face 包含的未使用字体发出请求？

Are browsers making request on unused fonts included by @font-face?

css

fonts

webfonts

问题

例子