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

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部分）中，它说：

  

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

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