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-face似乎从未加载，即使它是文件中唯一的定义。

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

我仅在Chrome中对此行为进行了深入测试，因此尽管我确实在Safari中打开过一次网页并看到了类似的行为，但是我不确定这是否只是Chrome。

Answer 1

欢迎，这很有意义。其他字体未加载，因为页面上没有任何字体在使用它们。当然，当它们是我正在使用的font-family唯一可用的字体时，它们确实已加载。而且在FontAwesome品牌未加载的情况下，它正盯着我看，我使用的是错误的类。

我有

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

代替

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

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

1 个答案: