某些字体的 FontAwesome Firefox 问题答案

【问题标题】：FontAwesome Firefox issues with certain fonts某些字体的 FontAwesome Firefox 问题
【发布时间】：2014-05-01 15:08:25
【问题描述】：

见截图：http://awesomescreenshot.com/0242jcea3a

某些 FontAwesome 图标根本不会在 Firefox 中显示，但其他图标会。列举一些不加载的：

YouTube
Vimeo
Instagram
视频播放按钮

我们正在使用最新的 CDN 版本 (//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css)。运行 Firefox 28。HTML 页面也是 UTF-8 字符集。

不知道是什么原因造成的，但这是一个非常烦人的错误，尤其是当它在 Chrome 和 Safari 等中运行良好时。

我尝试在本地而不是通过 CDN 加载字体，不幸的是这并没有解决问题。我也试过下面的 htaccess 代码：

<FilesMatch ".(ttf|otf|woff)$">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>

Firefox 中也没有显示安全/控制台错误？

任何帮助将不胜感激:)

【问题讨论】：

可能相关：superuser.com/questions/446001/…

标签： css firefox font-awesome

【解决方案1】：

也许您正在寻找 Base64 编码。 Font Awesome 不提供此功能。您可以尝试使用 IcoMoon 应用 (http://icomoon[dot]io/)。

Firefox 27.0 Mac OS X 10.8 截图 http://api[dot]browsershots[dot]org/png/original/93/932ccfb4f1b4dd3672f04607b4816b4a[dot]png

Firefox 27.0 Windows 7 截图 http://api[dot]browsershots[dot]org/png/original/ae/ae10896d922a40c773f0fb59b325c4c9[dot]png

JSFiddle: http://jsfiddle[dot]net/ hiru/79BYM/
在 IcoMoon 应用上编码： http://sosweetcreative[dot]com/wp-content/uploads/blogimg-base64-iconmoon[dot]jpg
来源： http://sosweetcreative[dot]com/2613/font-face-and-base64-data-uri

【讨论】：

【解决方案2】：

您的htaccess 代码似乎不完整。试试这个：

<FilesMatch ".(ttf|otf|eot|woff)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

在再次测试之前，请务必清除您的网站、CDN 和浏览器缓存。

这是一个已知的错误，已在 ticket 中讨论过

【讨论】：