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

Question

我想在网页中使用逻辑"如果你有这个系统字体A,使用它,否则下载并使用字体B".

我可以在CSS中这样做:

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

p {
  font-family: A, B;
}

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

Answer 1

该文件B.ttf 可能被要求,即使字体A可在系统上和浏览器并不需要回落到字体B.

从CSS3字体模块规范,§4.7字体加载指南,以及相关代码段转述:

如果在字符回退情况下可能下载字体,则用户代理可以下载字体(如果它在字体列表中列出但实际上不用于给定的文本运行).

@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和谷歌Chrome不会(我还没有在Opera和IE中测试过).

因此,看起来这种行为在浏览器之间有所不同 - 但在这种情况下没有对错.