Font Awesome Icons在某些浏览器中不起作用

Question

我正在使用Bootstrap + Font Awesome，大多数桌面和移动浏览器都可以，但Font awesome图标不适用于Opera Mobile，Opera Mini和某些版本的Android Browser等浏览器。 仅显示空白矩形。

有谁知道这个问题？并且，有解决方案吗？

由于

[编辑2013-03-06！重要] 我找不到任何明显的问题，所以我尝试了闻所未闻的解决方案。 我试过两个在线字体转换工具。 首先，我使用http://www.freefontconverter.com/将原始FontAwesome svg转换为ttf。然后我使用http://www.font2web.com/将.ttf转换为.eot，.woof anf .otf。

结果：opera mobile现在可以正常显示图标。（我不知道有什么变化，但是有效）

现在的问题是 Blackberry 6 。我用BB Curve 9300，Modernizr和Google字体测试了@ font-face，一切都还可以。 但FontAwesome仍然不起作用......

---

[编辑2013-03-01] Opera mobile 10+支持@ font-face，因此问题可能是另一个问题。 我尝试使用@ font-face的另一种服务器字体并且工作正常，但是使用FontAwesome我无法正确显示图标。

[编辑2013-03-03] 问题不仅在于我的网站，Font Awesome网站的例子和测试都不起作用......

[编辑2013-03-4] 我试图使用Modernizr“font-face”功能检测进行后备，但Opera Mobile和BlackBerry 6返回true，因为它们支持该功能。 如何检测FontAwesome字体是否已加载？

Answer 1

我希望看到一些不同的问题，希望能帮助您解决问题。

如果你提到哪种字体有效，我们可能会更好地帮助你。我会比较你说的字体与FontAwesome，看看有什么不同。我敢打赌，字形被映射到一个不同的unicode区域，也许浏览器不会从那里读取？

您可以使用Font Forge之类的工具来检查与其他字体的差异。我注意到当尝试从Font Forge重新生成FontAwesome字体时，我得到了em间距的验证错误，并且字形有错误（自相交，方向错误，极值处缺少点）。我以前在图标字体中看过这个并且从未出现过问题，但我之前没有在Opera上测试过。如果你比较尝试生成一个有效的字体，你可能会缩小问题范围。

其他东西我确定你已经覆盖但是仔细检查：

我在这里读到安装了本地版本的字体可能会与字体嵌入冲突。 https://github.com/FortAwesome/Font-Awesome/issues/247

如果您使用了icon-font，然后将自己的字形添加到其中，则使用类似字体squirrel的内容生成所有Web安全格式，确保您告诉生成器添加您创建的字形的unicode范围。一旦我忘记这样做，应用程序只添加了a-z范围内的字形。一个简单的检查方法是查看demo html页面中的gyphs选项卡，并确保包含所有图标。

你正在使用正确的CSS3 font-face规则并嵌入eot，ttf，woff和svg，你已经等了一会儿。我在一些旧的iphone上注意到字体需要永久显示。

使用像modernizr font-face特征检测这样的工具可能会使浏览器之间的某些支持变得更容易。

我很想知道问题是什么。

Answer 2

Opera Mini不支持font-face 正如官方网站http://www.opera.com/docs/specs/productspecs/

中提到的那样

我能想到的一个“肮脏”小技巧，就是将你的字体转换为SVG，并在CSS 中使用它，因为它是部分支持的（因为它也写在他们的网站上）。

像

这样的东西

.icon{

 background-image: url(icon.svg);
 -o-background-size: 100% 100%;
 -webkit-background-size: 100% 100%;
}

另请查看上面的链接 http://www.w3.org/TR/SVGTiny12/fonts.html

<强>更新

Opera mini不支持IOS 6.1中的FontAwesome

其他任何font-face示例都不起作用（http://codepen.io/bennettfeely/full/ErFGv）

但是使用SVG似乎是一个很好的解决方案，证明了这个概念 原始来源：http://dbushell.com/demos/css-sprites/ 以上演示的更多信息：http://coding.smashingmagazine.com/2012/01/16/resolution-independence-with-svg/

Answer 3

OPERA MOBILE的解决方案（无Opera Mini）

我尝试了两种在线字体转换工具。首先，我使用http://www.freefontconverter.com/将原始FontAwesome svg转换为ttf。然后我使用http://www.font2web.com/将.ttf转换为.eot，.woof anf .otf。

最后，我更换了原始文件，现在Opera mobile正确显示图标。

Answer 4

为此，我知道Opera Mini中有@ font-face支持，Andoroid中只有部分@ font-face支持2.2到3.0（早期的Android版本根本没有@ font-face支持）。请参阅：http://caniuse.com/fontface

我所知道的部分支持意味着他们不支持受DRM保护的字体，而某些语法如“笑脸”语法对他们不起作用。

因此，如果您想在Opera Mini和Android 2.1上显示图标，则需要回退图像图标。如果你有Android 2.2-3.0的问题，你可以通过改变语法来修复它。

Answer 5

FortAwesome报告了这样的错误：

1. https://github.com/FortAwesome/Font-Awesome/issues/246
2. https://github.com/FortAwesome/Font-Awesome/issues/791

他们尚未修复，他们联系了Opera dev关系，以找出造成这种情况的原因。除了等待它们修复它之外，你没有太多选择。跟踪错误以了解更多信息。

Answer 6

1. 转到http://icomoon.io/app/

2. 按钮图标库

3. 添加库Font Awesome

4. 选择您想要的图标

5. 按钮字体（将图标导出为css字体很棒）

6. 用新字体替换字体真棒（ttf，svg。etc ...）

CSS

 @font-face{
font-family:"FontAwesome";
src:url('../fonts/awesome/fontawesome.eot');
src:url('../fonts/awesome/fontawesome.eot?#iefix') format('embedded-opentype'),
url('../fonts/awesome/fontawesome.woff') format('woff'),    url('../fonts/awesome/fontawesome.ttf') format('truetype'),
        url('../fonts/awesome/fontawesome.svg#fontawesomeregular') format('svg');
font-weight:normal;font-style:normal;}.flag:before,.mobile:before{font-family:"FontAwesome";font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;line-height: 1;-webkit-font-smoothing: antialiased;display: inline-block; text-decoration: inherit;}.flag:before{content:"\f024";}.mobile:before{content:"\f10b";}

我试试这个，然后Awesome Fonts在Opera Mobile中运行：）

Answer 7

也许这与charset有关？您是否在文档和样式表中声明了UTF-8？

<meta charset="UTF-8">

或

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

并在样式表中（注意，必须是第一行，第一列）：

@charset "utf-8";

Answer 8

作为参考，我有这个问题，问题是域名。有些浏览器，Firefox特别拒绝从其他域加载字体（称为相同域策略）。标题

Access-Control-Allow-Origin "*"

例如在nginx中，这个配置如下：

location ~* \.(eot|ttf|woff)$ {
    add_header Access-Control-Allow-Origin *;
}

必须设置，并且还要记住字体的内容类型必须是

application/x-font-ttf                ttf;
font/opentype                         otf;
application/vnd.ms-fontobject         eot;
font/x-woff                           woff;

错误的内容类型可能导致字体无法加载，因此您丢失了图标。 将此信息作为参考很好：）

Answer 9

我也遇到了在Blackberry中显示SVG字体的问题。问题是svg的名称（在文档中），字体系列的名称必须相同。我在这里找到了这个答案，在最后一个答案的评论中：

@fontface on blackberry os 7

Answer 10

使用icomoon app http://icomoon.io/app/将svg字体更改为web字体，并替换Font Awesome的旧字体。它适用于Opera mobile