FF、Chrome、Safari中有部分FA图标显示，但没有浏览器全部显示

Question

我使用的是 Pixelarity (https://pixelarity.com/ethereal) 的模板，他们在其中实现了 font awesome v4。因为我也想使用 'brands'，所以我需要连接 v5.

在尝试将 FA v5 CSS 与模板的 CSS 组合后，它以某种方式损坏了（我不是 CSS-Pro）。

特别是，有六个圆圈的网格，每个圆圈包含一个图标。 Firefox 显示其中五个，Chrome 显示其中三个而 Safari 仅显示一个图标。该网站上还有几个较小的图标（社交媒体），只有 Firefox 才能正确显示它们。

我真的运行没主意了，希望你们中的一些人能够帮助我。

恕我直言，现在提供我的所有代码没有帮助，因为它也可以通过浏览器中的开发人员工具看到，对吗？如果有人需要我的 *.css 或 *.html

中的特定行，请告诉我

非常感谢您。

德国最好的，马塞尔

编辑：

我按照建议做了。尝试使用我的本地 Apache（mac 上的 Mamp）排除故障并重现错误。恐怕我仍然没有任何解释，但至少我在浏览器的行为中发现了某种模式。

我的 fontawesome.css 包含以下几行，它有效

就像 firefox 中的魅力一样。所有图标都正确显示
部分在 safari 中。仅显示 Font Awesome 5 Brands 中的图标
部分在 chrome。仅显示 Font Awesome 5 Brands 和 Font Awesome 5 Free (solid) 中的图标

  .sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }

.sr-only-focusable:active, .sr-only-focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto; }
@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';
  font-weight: 400;  
@font-face 
  font-family: 'Font Awesome 5 Brands';
  font-style: normal;
  font-weight: 400;
  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"); }

.far {
  font-family: 'Font Awesome 5 Free';
  font-weight: 400; 
@font-face 
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/fa-regular-400.eot");
  src: url("../fonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../fonts/fa-regular-400.woff2") format("woff2"), url("../fonts/fa-regular-400.woff") format("woff"), url("../fonts/fa-regular-400.ttf") format("truetype"), url("../fonts/fa-regular-400.svg#fontawesome") format("svg"); }

.fas {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900; 
@font-face 
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  src: url("../fonts/fa-regular");
  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"); }

如果我现在删除 .fas、.far 和 .fab，那么代码如下所示，有效

部分在 Firefox 中。仅显示 Font Awesome 5 Brands 和 Font Awesome 5 Free (solid) 中的图标。
就像 safari 中的魅力一样。所有图标都正确显示。
部分在 chrome。仅显示 Font Awesome 5 Brands 和 Font Awesome 5 Free (solid) 中的图标。

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }

.sr-only-focusable:active, .sr-only-focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto; }
@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"); }

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/fa-regular-400.eot");
  src: url("../fonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../fonts/fa-regular-400.woff2") format("woff2"), url("../fonts/fa-regular-400.woff") format("woff"), url("../fonts/fa-regular-400.ttf") format("truetype"), url("../fonts/fa-regular-400.svg#fontawesome") format("svg"); }

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  src: url("../fonts/fa-regular");
  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"); }

我按照 fontawesome.com 的说明将整个字体包含在页面的 *.css 中，并且还对字体路径进行了三重检查。

在此处添加一个括号 chrome 可以，在此处删除一个括号并且 safari 可以... 我完全被困住了，不知道该怎么做，因为我不知道为什么三种不同的浏览器会以如此不同的方式运行。

Answer 1

我怀疑有人会像我一样愚蠢，但是我还是让你知道我的代码中的错误。

Font Awesome 包含三种可免费使用的字体。

FA 品牌
FA 常规
FA 固体

在 *.css 中用 @font-face 调用它们，在其中用 font-family: <Font Name>.

分隔它们

如果你看一下我以前的代码，每种字体（品牌、常规和纯色）都是用一个单独的 @font-face 参数单独调用的。这就是魔法发生的地方！由于 FA Regular 和 FA Solid 都是名为 Font Awesome 5 Free 的家族的一部分，因此如果有两种不同的字体声明属于同一家族，那么多个浏览器似乎很难找到正确的字体。 FA Brands 能够正确显示的原因是它的家族被称为 Font Awesome 5 Brands.

长话短说。出

@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"); }

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/fa-regular-400.eot");
  src: url("../fonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../fonts/fa-regular-400.woff2") format("woff2"), url("../fonts/fa-regular-400.woff") format("woff"), url("../fonts/fa-regular-400.ttf") format("truetype"), url("../fonts/fa-regular-400.svg#fontawesome") format("svg"); }

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  src: url("../fonts/fa-regular");
  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"); }

我做了

@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"); }

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 400, 900;
  src: url("../fonts/fa-regular-400.eot");
  src: url("../fonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("../fonts/fa-regular-400.woff2") format("woff2"), url("../fonts/fa-regular-400.woff") format("woff"), url("../fonts/fa-regular-400.ttf") format("truetype"), url("../fonts/fa-regular-400.svg#fontawesome") format("svg");

  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"); }

现在它对所有浏览器来说就像一个魅力。

感谢您的所有建议和帮助！

玩得开心，马塞尔

FF、Chrome、Safari中有部分FA图标显示，但没有浏览器全部显示

Some FA icons are displayed in FF, Chrome and Safari, but no browser displays them all

html

css

font-awesome-5