css - Font Awesome 图标在某些浏览器中不起作用

Question

我使用的是 Bootstrap + Font Awesome，大多数桌面和移动浏览器都可以，但 Font awesome 图标不适用于某些浏览器，如 opera Mobile、Opera Mini 和某些版本的 Android 浏览器。 只显示一个空白矩形。

有人知道这个问题吗？还有，有解决办法吗？

谢谢

[编辑 2013-03-06 !Important] 我找不到任何明显的问题，所以我尝试了闻所未闻的解决方案。 我尝试了两个在线字体转换工具。 首先我用了 http://www.freefontconverter.com/将原始的 FontAwesome svg 转换为 ttf。然后我用了 http://www.font2web.com/将该 .ttf 转换为 .eot、.woof 和 .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“字体”功能检测进行回退，但 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

如果您采用图标字体，然后向其添加自己的字形，然后使用 font squirrel 之类的东西生成所有网络安全格式，请确保您告诉生成器添加您创建的字形的 unicode 范围。一旦我忘记这样做，应用程序只添加了 a-z 范围内的字形。一种简单的检查方法是查看演示 html 页面中的 gyphs 选项卡，并确保包含所有图标。

您正在使用正确的 CSS3 字体规则并嵌入 eot、ttf、woff 和 svg，您已经等待了一会儿。我注意到在一些旧的 iPhone 上字体需要很长时间才能显示。

使用诸如 modernizr 字体特征检测之类的工具可能会使浏览器之间的某些支持更容易一些。

我很好奇问题是什么。