css3 – Font Awesome图标在某些浏览器中不起作用

前端之家收集整理的这篇文章主要介绍了css3 – Font Awesome图标在某些浏览器中不起作用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我使用的是Bootstrap Font Awesome,而且大多数台式机和移动浏览器都可以使用,但是Font awesome图标不能像Opera,Opera Mini和某些版本的Android Browser那样的浏览器使用。
显示一个空白矩形。

有人知道这个问题吗?有没有解决方案?

谢谢

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

结果:歌剧手机现在正确显示图标。 (我不知道是什么变化,但工作)

现在的问题是黑莓6.我用BB曲线9300,Modernizr和Google字体测试了@ font-face,一切都OK。
但FontAwesome仍然无法正常工作

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

[编辑2013-03-03]
问题不仅仅是我的网站,Font Awesome网站的示例和测试不工作…

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

解决方法

有几个不同的问题我会研究,我希望帮助你解决它。

如果你提到什么字体工作,我们可能会帮助更好。我会比较你所使用的FontAwesome的字体看看有什么区别。我会打赌字形映射到不同的unicode区域,也许浏览器不从那里读取?

您可以使用像Font Forge这样的工具来检查与其他字体的差别。我注意到当从Font Forge重新生成FontAwesome字体时,我得到了em间距的验证错误,并且字形有错误(自相位错误,方向错误,极值缺失点)。我以前在图标字体中看到过,从来没有出现过问题,但是我还没有在Opera上测试过。如果你比较尝试生成一个字体的东西,你可能可以缩小问题。

其他东西我确定你覆盖但双重检查:

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

如果您使用图标字体,然后添加您自己的字形,然后使用像字体松鼠生成所有的Web安全格式,确保你告诉发电机添加您创建的字形的Unicode字符串范围。一旦我忘了这样做,应用程序只在a-z范围内添加了字形。一个简单的检查方法是查看演示html页面中的gyphs选项卡,并确保包含所有图标。

您正在使用正确的CSS3字体规则并嵌入eot,ttf,woff和svg,您已经等待了一点。我注意到一些旧的iphone字体永远显示

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

我很好奇,看看是什么问题。

猜你在找的CSS相关文章