Question

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

这些文件都在同一个域中提供，路径是正确的，我正在使用FontAwesome的官方CSS，当通过他们的网站和本地文档提供时，它可以在Firefox中运行。

所以我一定错过了一些简单的事情。

[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的错误示例。我试图做完全根路径/静态/字体和相对于CSS ../font/，它总是失败，我的这些错误。

一切都适用于Chrome等。似乎Firefox只恨我。我搜索了其他答案，我得到了整个系列的字体。

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

感谢任何提示。

Answer 1

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

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

由于没有引号，FF无法解析src：url（...）位。因为它失败了它只有src：..这是IE的意思，它在FF中不起作用。

将引号更改为双引号会让一切都快乐。

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

感谢Matt帮助我仔细研究这个问题。

Answer 2

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

Answer 3

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

Answer 4

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

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

结果需要引用格式说明符，如格式（＆＃39; svg＆＃39;）。网站提供的一些css样式表不引用格式说明符。我用单引号和双引号试验了这条路径并没有任何区别。所以我可以说这是不带引号的格式说明符而不是双/单引号路径的问题。

Answer 5

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

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

＆＃13;

@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
}

＆＃13;

并使用头部CDN中的链接

＆＃13;

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

＆＃13;

你会很高兴。

firefox @ font-face与fontawesome失败

5 个答案: