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

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。它也不显示我的字体文件正在加载。

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

有什么建议？

最好的问候，本尼迪克特

PS：当然，我确实检查了其他网络字体的可用性。它们存在于给定的路径上。就是没加载。

Answer 1

只是为了回答为什么会发生这种情况。在CSS 字体模块规范（第4.8节字体加载指南）中，它说：

@font-face 规则旨在允许延迟加载仅在文档中使用时才下载的字体资源。

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