css - 为什么我的网络字体文件没有被加载？

Question

我想知道，为什么我的六个网络字体文件中只有两个被加载。

这是我的 CSS:

@font-face {
  font-family: 'Constructa';
  src: url(/content/themes/blog-theme/fonts/Constructa-Regular.woff);
}
@font-face {
  font-family: 'TranSerif HdlUltrabold';
  src: url(/content/themes/blog-theme/fonts/TranSerif-HdlUltrabold.woff);
}
@font-face {
  font-family: 'AvantGarde Bold';
  src: url(/content/themes/blog-theme/fonts/AvantGarBol.woff);
}
@font-face {
  font-family: 'ChronicleTextG3';
  src: url(/content/themes/blog-theme/fonts/ChronicleTextG3.woff);
}
@font-face {
  font-family: 'Antenna Bold';
  src: url(/content/themes/blog-theme/fonts/Antenna-Bold.otf);
}
@font-face {
  font-family: 'Antenna Thin';
  src: url(/content/themes/blog-theme/fonts/Antenna-Thin.otf);
}

Google Chrome 中的“网络”选项卡不显示任何 404。它也没有显示正在加载我的字体文件。

我在其他浏览器中遇到了同样的问题，所以我建议，是我的代码导致了问题。

有什么建议吗？

最好的问候， 本尼迪克特

P.S.:当然，我确实检查了其他网络字体的可用性。它们存在于给定的路径上。只是没有加载。

Answer 1

只是为了回答为什么会发生这种情况。在CSS Fonts Module规范(第 4.8 Font loading guidelines 节)说:

The @font-face rule is designed to allow lazy loading of font resources that are only downloaded when used within a document.

因此，由于您通过 @font-face 指定了所有字体，但在后续 CSS 中仅使用了其中两种字体，因此 Chrome 和 Firefox 等浏览器不会下载它们(这节省了大量带宽，特别是在移动设备上)。