9

我正在运行的 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

感谢您的任何提示。

4

5 回答 5

9

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

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

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

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

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

感谢马特帮助我仔细研究了这一点。

于 2012-06-18T18:07:47.717 回答
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);
}

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

于 2014-11-24T01:45:27.570 回答
4

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

于 2012-06-18T14:37:41.093 回答
3

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

于 2012-09-06T14:09:21.770 回答
1

我知道这来晚了，但最好的选择是使用 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

你会很高兴的。

于 2017-10-21T04:49:35.087 回答