firefox @font-face 因 fontawesome 而失败答案

【问题标题】：firefox @font-face fail with fontawesomefirefox @font-face 因 fontawesome 而失败
【发布时间】：2017-10-21 14:04:02
【问题描述】：

我正在运行的 OSS 应用程序上使用 FontAwesome 字体，但我似乎无法通过 Firefox 的字体清理程序。

文件都在同一个域中提供，路径正确，而且我使用的是 FontAwesome 的官方 css，当通过他们的网站和本地文档提供时，它在 Firefox 中工作。

所以我一定错过了一些简单的东西。

直播网址：https://bmark.us

[11:39:02.945] downloadable font: invalid version tag (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:0)
source: http://127.0.0.1:6543/static/font/fontawesome-webfont.eot @ http://127.0.0.1:6543/static/css/responsive.css
[11:39:02.945] downloadable font: rejected by sanitizer (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:0)
source: http://127.0.0.1:6543/static/font/fontawesome-webfont.eot @ http://127.0.0.1:6543/static/css/responsive.css

是当我尝试通过 dev 更正此问题时 Firefox 错误的示例。我试图做完整的根路径 /static/font 和相对于 css ../font/ 并且它总是失败并出现这些错误。

一切都可以在 Chrome 等中运行。似乎 Firefox 讨厌我。我已经搜索了其他答案，并且得到了整个系列的字体。

https://github.com/mitechie/Bookie/tree/develop/bookie/static/font

感谢任何提示。

【问题讨论】：

标签： firefox font-face font-awesome

【解决方案1】：

谢谢，这是一个两部分的问题。

第二部分先来。 fontawesome.scss 中的示例 css 在各种字体格式的路径周围使用单引号。当我在它们上运行我的 scss 构建器（pyscss）时，它剥离了它们。他们需要是双引号。

由于没有引号，FF 无法解析 src: url(...) 位。由于它失败了，它只有 src: ..eot 这意味着 IE 有，它在 FF 中不起作用。

将引号更改为双引号使一切都变得愉快。

所以这是我使用 pyscss 的错，它的解析器最终破坏了 Firefox 的语法。

感谢Matt 帮助我更仔细地了解这一点。

【讨论】：

我有同样的错误，但引号不是问题。我的解决方案是从fontsquirrel.com/tools/webfont-generator 的TTF 文件重新转换字体，然后重新上传它们。然后错误消失了。

【解决方案2】：

A) 你确定你的服务器设置了 eot/woff/ttf/svg 的 mime 类型吗？ B) 看起来您遇到了 EOT 的问题。这可以通过 Firefox 不支持 EOT 来解释；它使用 WOFF 和 TTF。 C) 您是否尝试过使用 Firebug 或 Firefox 的原生开发工具进行调试？ D) 你能发布你的（相关的）CSS 和 HTML 吗？

【讨论】：

谢谢，这是一个两部分的问题。第二部分首先出现。 fontawesome.scss 中的示例 css 在各种字体格式的路径周围使用单引号。当我在它们上运行我的 scss 构建器时，它剥离了它们。它们必须是双引号。由于没有引号，FF 无法解析 src: 位。由于它失败了，它只有 src: ..eot 这意味着 IE 有，它在 FF 中不起作用。将引号更改为双引号使一切都变得愉快。
实际上，在 Firefox 中，Content-Type 标头被忽略了。 developer.mozilla.org/en-US/docs/Web/CSS/@font-face#Notes

【解决方案3】：

我在我的一个客户网站上遇到了同样的问题。

@font-face {
 font-family: 'SourceSansProBlack';
  src: url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/eot');
  src: url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/eot') format('embedded-opentype'),
       url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/woff') format('woff'),
       url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/ttf') format('truetype'),
       url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/svg') format('svg');
}

以上在Firefox中工作。下面那个没用。

@font-face {
 font-family: 'SourceSansProBlack';
  src: url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/eot');
  src: url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/eot') format(embedded-opentype),
       url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/woff') format(woff),
       url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/ttf') format(truetype),
       url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/svg') format(svg);
}

原来格式说明符需要像格式（'svg'）一样被引用。网站提供的一些 css 样式表没有引用格式说明符。我已经尝试过使用单引号和双引号的路径，但这没有任何区别。所以我可以说这是不带引号的格式说明符而不是双引号/单引号路径的问题。

【讨论】：

【解决方案4】：

在我的情况下，将 .eot/.woff/.svg/.ttf 文件放在与其他静态内容（css）相同的 *.war 文件中就足够了, png 等) 被放置。看起来 FF 和 IE 发现从其他服务器下载字体文件很危险。

【讨论】：

【解决方案5】：

我知道这迟到了，但最好的选择是使用 CDN 中的 font-awesome。如果你这样做，你几乎不会遇到这种错误。

如果您从外部文件引用字体，请注释掉以下行：

@font-face {
    font-family: FontAwesome;
    src: url("../vendors/font-awesome/fonts/fontawesome-webfont.eot");
    src: url("../vendors/font-awesome/fonts/fontawesome-webfont.eot") format("embedded-opentype"), url("../vendors/font-awesome/fonts/fontawesome-webfont.woff2") format("woff2"), url("../vendors/font-awesome/fonts/fontawesome-webfont.woff") format("woff"), url("../vendors/font-awesome/fonts/fontawesome-webfont.ttf") format("truetype"), url("../vendors/font-awesome/fonts/fontawesome-webfont.svg#fontawesomeregular") format("svg");
    font-weight: 400;
    font-style: normal
}

并在头部使用来自 CDN 的链接

<head>
   <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
 
</head

你会很高兴的。

【讨论】：