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]问题不只是我的网站,字体真棒网站的例子和测试不起作用...

[编辑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然后将自己的字形添加到其中,则使用类似font squirrel的内容生成所有Web安全格式,确保您告诉生成器添加您创建的字形的unicode范围.一旦我忘记这样做,应用程序只添加了az范围内的字形.一种简单的检查方法是查看demo html页面中的gyphs选项卡,并确保包含所有图标.

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

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

我很想知道问题是什么.

Answer 2

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

据我所知，部分支持意味着它们不支持受 DRM 保护的字体，并且某些语法（例如“笑脸”语法）对它们不起作用。

因此，如果您想在 Opera Mini 和 Android 2.1 上显示图标，您将需要回退到图像图标。如果您在使用 Android 2.2-3.0 时遇到问题，您可以通过更改语法来修复它。