Question

我想在网页中使用“如果你有这个系统字体A，使用它，否则下载并使用字体B”的逻辑选择字体。

我可以在CSS中这样做：

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

p {
  font-family: A, B;
}

我的问题是：如果系统安装了字体A（即实际上不需要字体B来呈现文档），是否下载了B.ttf - 并且浏览器之间是否有所不同？

Answer 1

即使字体A在系统上可用且浏览器无法回退到字体B，也可以请求文件B.ttf 。 / p>

从CSS3字体模块规范§4.7 Font loading guidelines转述，并附带相关代码段：

如果在字符后备情况下可能下载字体，用户代理可能会下载字体，如果字体列在字体列表中但实际上并未用于给定的文本运行。
@font-face {
  font-family: GeometricModern;
  src: url(font.ttf);
}

h2 {
  /* font may be downloaded for pages with h2 elements,
     even if Futura is available locally */
  font-family: Futura, GeometricModern, sans-serif;
}

由于这不是一项要求（即“可能”，而不是“必须”），因此供应商可以选择是否下载网络字体以供后备使用，即使不需要。据我所知，Firefox会下载B.ttf，而Safari和Google Chrome似乎不会（我还没有在Opera和IE中测试过）。

所以，看起来这种行为在浏览器之间有所不同 - 但在这种情况下没有对错。

浏览器是否在@ font-face语句中下载不必要的文件？

1 个答案: