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并打开“网络”标签。

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

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

问题

示例

1 个答案: