logo标签列表

字体Awesome图标在某些浏览器中无法正常工作

cssblackberrytwitter-bootstrapfont-awesomeopera-mobile
21
我正在使用Bootstrap+Font Awesome，大多数桌面和移动浏览器都能正常工作，但是像Opera Mobile、Opera Mini和某些版本的Android浏览器等一些浏览器无法正常显示Font Awesome图标，只会显示一个空白矩形。
有人知道这个问题吗？是否有解决方案？
谢谢
[编辑2013-03-06！重要]
我找不到明显的问题，所以我尝试了一些未知的解决方案。我尝试使用两个在线字体转换工具。首先，我使用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时无法正确显示图标。

enter image description here

[编辑于2013年3月3日] 问题不仅出现在我的网站上，Font Awesome网站的示例和测试也无法正常工作...

enter image description here

[2013年03月04日编辑] 我尝试使用Modernizr中的“font-face”特性检测来创建备用方案，但Opera移动版和BlackBerry 6会返回true，因为它们支持该功能。 我如何检测FontAwesome字体是否已加载？

其他图像启用了吗？是的。我放置了一个PNG图标来展示它们正常工作。 - Gonzalo
你能发布一下你用于调用FontAwesome的CSS吗？ - Shail
你不需要其他的CSS，只需要font-awesome.css（也许还有font-awesome-ie7.min.css）。 - Gonzalo
10个回答
7
我会帮你解决几个问题，希望能帮到你。
如果你能提供使用的字体信息，我们可以更好地帮助你。我建议将你说过的工作正常的字体与FontAwesome进行比较，看看它们之间的差异。我猜测图标映射到了不同的Unicode区域，可能是因为浏览器无法从那里读取？
你可以使用像Font Forge这样的工具来检查其他字体的差异。我注意到，当我尝试从Font Forge重新生成FontAwesome字体时，em间距出现了验证错误，并且字形也有错误（自相交，方向错误，在极端点处缺少点）。我以前在图标字体中见过这种情况，但以前从未在Opera上测试过。如果你将尝试生成字体与可工作的字体进行比较，你可能可以缩小问题范围。
其他一些你可能已经涉及到的事项，但需要再次检查的内容：
我在这里阅读到，本地安装字体版本可能会与嵌入字体发生冲突：https://github.com/FortAwesome/Font-Awesome/issues/247 如果你将图标字体添加到自己的字形中，然后使用类似font squirrel的工具生成所有Web安全格式，请确保告诉生成器添加你创建的字形的Unicode范围。有一次我忘记这样做了，应用程序仅添加了a-z范围内的字形。检查演示HTML页面中的字形选项卡，确保所有图标都包含在内，这是一个简单的方法。
你正在使用正确的CSS3 font-face规则，并嵌入eot、ttf、woff和svg格式，并等待一段时间。我注意到，在一些旧的iPhone上，字体需要很长时间才能显示出来。
使用像modernizr font-face feature detect这样的工具可能会使浏览器之间的支持变得更容易。
我很好奇问题出在哪里。
我试图使用Modernizr的“font-face”特性检测来创建一个回退，但是Opera Mobile和BlackBerry 6返回true，因为它们支持该特性。我该如何检测FontAwesome字体是否已加载？ - Gonzalo
好的，我会下载Font Forge并移动字形。 尝试将你的字体图标从它们原来的位置移到另一个PUA，然后通过Font Squirrel导出，我敢打赌它会奏效。 - Jesse
@Jesse，可以请您在这里看一下关于Opera Mobile的问题吗：http://tinyurl.com/ovglq92？ - Istiaque Ahmed
@IstiaqueAhmed - 在测试移动Web时，我总是在真实设备上进行测试。你无法保证在模拟器上的测试结果。 - Jesse
@Jesse，用于测试目的的真实设备有多少个可以使用？那么真正的解决方案是什么？ - Istiaque Ahmed
显示剩余2条评论
3

  1. 打开http://icomoon.io/app/

  2. 点击图标库按钮

  3. 添加Font Awesome库

  4. 选择需要的图标

  5. 点击字体按钮（将图标导出为css Font Awesome格式）

  6. 用新的Font Awesome替换旧的Font Awesome（ttf、svg等）

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上可以正常工作 :)
3

解决方法适用于Opera Mobile（非Opera Mini）

我尝试了两个在线字体转换工具。首先，我使用http://www.freefontconverter.com/将原始的FontAwesome svg转换为ttf格式。然后，我使用http://www.font2web.com/将该.tff文件转换为.eot、.woof和.otf格式。

最后，我替换了原始文件，现在Opera Mobile可以正确地显示图标。

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 其他字体示例也无法使用(http://codepen.io/bennettfeely/full/ErFGv) enter 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
我知道Opera Mini支持@font-face，而Android 2.2到3.0只有部分支持（早期版本完全不支持@font-face）。具体情况请参见：http://caniuse.com/fontface。
从我所了解的部分支持意味着它们不支持DRM受保护的字体和某些语法，例如“smiley”语法在它们那里无法工作。
因此，如果您想在Opera Mini和Android 2.1上显示图标，则需要回退到图像图标。如果您在Android 2.2-3.0上遇到问题，可以通过更改语法来修复它。
Opera mobile 10+支持@font-face，所以问题可能是其他的。我尝试使用另一个带有@font-face的服务器字体，效果很好，但是对于FontAwesome，我无法正确显示图标。 - Gonzalo
我试图使用Modernizr的“font-face”特性检测来创建一个回退方案，但是Opera Mobile和BlackBerry 6返回true，因为它们支持该功能。我如何检测FontAwesome字体是否已加载？ - Gonzalo
问题不在于@font-face。它被Opera Mobile 10+和BlackBerry 6+支持。 Font Awesome字体不使用DRM，样式表也不包含“smiley”语法。 谢谢你，但在这种情况下，那不是最好的答案。 - Gonzalo
很抱歉我无法提供帮助。希望你能找到问题所在。 - Alexey Ivanov
2
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;

错误的内容类型可能导致字体无法加载，从而导致图标丢失。 作为参考，拥有这些信息是很好的 :)
1
也许这与字符集有关？你的文档和样式表中都声明了UTF-8吗？
<meta charset="UTF-8">

或者

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

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

@charset "utf-8";
是的，我在文档和样式表中声明了Charset UTF8，但那不是问题。 - Gonzalo
0

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

黑莓OS 7上的@fontface

0

使用icomoon应用程序http://icomoon.io/app/将SVG字体更改为Web字体，并替换Font Awesome的旧字体。在Opera Mobile中对我有效。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接