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

时间:2013-02-22 16:19:10

标签: css3 blackberry twitter-bootstrap font-awesome opera-mobile

我正在使用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我无法正确显示图标。

enter image description here

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

enter image description here

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

10 个答案:

答案 0 :(得分:7)

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

如果你提到哪种字体有效,我们可能会更好地帮助你。我会比较你说的字体与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特征检测这样的工具可能会使浏览器之间的某些支持变得更容易。

我很想知道问题是什么。

答案 1 :(得分:3)

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 awesome fault in ios

其他任何font-face示例都不起作用(http://codepen.io/bennettfeely/full/ErFGventer image description here

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

enter image description here

答案 2 :(得分:3)

OPERA MOBILE的解决方案(无Opera Mini)

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

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

答案 3 :(得分:2)

为此,我知道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的问题,你可以通过改变语法来修复它。

答案 4 :(得分:2)

FortAwesome报告了这样的错误:

  1. https://github.com/FortAwesome/Font-Awesome/issues/246
  2. https://github.com/FortAwesome/Font-Awesome/issues/791
  3. 他们尚未修复,他们联系了Opera dev关系,以找出造成这种情况的原因。除了等待它们修复它之外,你没有太多选择。跟踪错误以了解更多信息。

答案 5 :(得分:2)

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

  2. 按钮图标库

  3. 添加库Font Awesome

  4. 选择您想要的图标

  5. 按钮字体(将图标导出为css字体很棒)

  6. 用新字体替换字体真棒(ttf,svg。etc ...)

  7. 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中运行:)

答案 6 :(得分:1)

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

<meta charset="UTF-8">

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

并在样式表中(注意,必须是第一行,第一列):

@charset "utf-8";

答案 7 :(得分:1)

作为参考,我有这个问题,问题是域名。有些浏览器,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;

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

答案 8 :(得分:0)

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

@fontface on blackberry os 7

答案 9 :(得分:0)

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