css - 只有一些@font-face 正在加载

Question

我在我的网站的主 CSS 文件的顶部有以下内容

@charset "UTF-8";
@font-face {
  font-family: "Montserrat";
  src: url("../../fonts/montserratRegular.woff2") format("woff2"), url("../../fonts/montserratRegular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Montserrat";
  src: url("../../fonts/montserratRegularItalic.woff2") format("woff2"), url("../../fonts/montserratRegularItalic.woff") format("woff");
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: "Montserrat";
  src: url("../../fonts/montserratBold.woff2") format("woff2"), url("../../fonts/montserratBold.woff") format("woff");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "Montserrat";
  src: url("../../fonts/montserratMedium.woff2") format("woff2"), url("../../fonts/montserratMedium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Montserrat";
  src: url("../../fonts/montserratMediumItalic.woff2") format("woff2"), url("../../fonts/montserratMediumItalic.woff") format("woff");
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: "Montserrat";
  src: url("../../fonts/montserratLight.woff2") format("woff2"), url("../../fonts/montserratLight.woff") format("woff");
  font-weight: 300;
  font-style: normal;
}
/*!
 * Font Awesome Free 5.6.1 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 */
@font-face {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  src: url("../../fonts/fa-solid-900.eot");
  src: url("../../fonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("../../fonts/fa-solid-900.woff2") format("woff2"), url("../../fonts/fa-solid-900.woff") format("woff"), url("../../fonts/fa-solid-900.ttf") format("truetype"), url("../../fonts/fa-solid-900.svg#fontawesome") format("svg");
}
.fa,
.fas {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

/*!
 * Font Awesome Free 5.6.1 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 */
@font-face {
  font-family: "Font Awesome 5 Brands";
  font-style: normal;
  font-weight: normal;
  src: url("../../fonts/fa-brands-400.eot");
  src: url("../../fonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("../../fonts/fa-brands-400.woff2") format("woff2"), url("../../fonts/fa-brands-400.woff") format("woff"), url("../../fonts/fa-brands-400.ttf") format("truetype"), url("../../fonts/fa-brands-400.svg#fontawesome") format("svg");
}
.fab {
  font-family: "Font Awesome 5 Brands";
}

但只有部分字体文件正在加载，我不太明白为什么。 montserratRegular、montserratBold、montserratLight 和 fa-solid-900 是唯一加载的。如果我删除 Font Awesome 字体的 @font-face 定义，那么还会加载 montserratRegularItalic 字体。

如果我删除所有字体定义，只添加其中一个，那么单个 @font-face 将加载。除了 Font Awesome Brands 之外，@font-face 似乎永远不会加载，即使它是文件中的唯一定义也是如此。

我仔细检查了服务器上是否存在文件，并且控制台中没有 404 或其他错误/警告。浏览器似乎只是拒绝加载它们。

我只在 Chrome 中深入测试过这种行为，所以我不确定这是否只是 Chrome 的问题，尽管我确实在 Safari 中打开过一次页面并看到了类似的行为。

Answer 1

嗯，这是有道理的。其他字体未加载，因为页面上没有任何内容使用它们。当然，当它们是我使用的 font-family 唯一可用的字体时，它们确实会加载。在 FontAwesome Brands 未加载的情况下，它正盯着我的脸，我使用了错误的类。

我有

<i class="fa fa-facebook"></i>

代替

<i class="fab fa-facebook"></i>