Css 字体图标在某些浏览器中不起作用

我使用的是Bootstrap+Font-Awesome，大多数桌面和移动浏览器都可以使用，但Font-Awesome图标在某些浏览器上不起作用，如opera mobile、opera Mini和某些版本的Android浏览器。 仅显示一个空白矩形

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

谢谢

[编辑2013-03-06！重要信息] 我找不到任何明显的问题，所以我尝试了一些前所未闻的解决方案。 我尝试了两个在线字体转换工具。 首先，我将原始svg转换为ttf。然后我把.ttf转换成.eot、.woof和.otf

结果：opera mobile现在可以正确显示图标了。（我不知道有什么变化，但可以正常工作）

现在的问题是黑莓6。我用BB曲线9300测试了@font-face，Modernizer和Google字体，一切正常。 但它仍然不起作用

---

[编辑2013-03-01] Opera mobile 10+支持@font-face，因此问题可能是另一个。 我尝试使用另一种带有@font-face的服务器字体，效果还可以，但使用FontAwesome时，我无法正确显示图标

[编辑2013-03-03] 问题不只是我的网站，网站的例子和测试都不起作用

[编辑2013-03-4]

---

我曾尝试使用Modernizer“字体脸”功能检测进行回退，但opera Mobile和BlackBerry 6返回true，因为它们支持该功能。

---

如何检测FontAwesome字体是否已加载？

因此，我知道Opera Mini中有@font-face支持，而在2.2到3.0版本的Android中只有部分@font-face支持（早期Android版本根本没有@font-face支持）。见：

据我所知，部分支持意味着它们不支持受DRM保护的字体，一些语法，如“smiley”语法对它们不起作用

---

因此，如果你想在Opera Mini和Android 2.1上显示图标，你需要回退到图像图标。如果你在安卓2.2-3.0上遇到问题，你可以通过改变语法来解决。

也许这与字符集有关？您是否在文档和样式表中声明UTF-8

<meta charset="UTF-8">

---

报告此类错误的原因如下：

---

他们还没有被修复，他们已经联系了Opera-dev关系部，以找出造成这种情况的原因。你没有太多的选择，除非等待他们修复它。跟踪bug以了解更多信息。

我将研究几个不同的问题，希望能帮助您解决这些问题

如果你提到什么字体有效，我们可能会帮你做得更好。我会比较一下你说的字体和Fontsome的区别。我敢打赌这些标志符号映射到不同的unicode区域，可能浏览器没有从那里读取

您可以使用Font Forge之类的工具来检查与其他字体的差异。我注意到，当试图从font Forge重新生成FontAwesome字体时，我得到了em间距的验证错误，并且glyph有错误（自交、方向错误、极值处缺少点）。我以前在图标字体中看到过这一点，从来没有出现过问题，但我以前也没有在Opera上测试过。如果您将尝试生成字体与工作的字体进行比较，您可能会缩小问题的范围

我相信您已经涵盖了其他内容，但请仔细检查：

我在这里读到，安装字体的本地版本可能与嵌入的字体冲突

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

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

使用Modernizer字体特征检测这样的工具可能会使浏览器之间的支持变得更容易一些

---

我很想知道问题出在哪里。

Opera Mini不支持字体 正如官方网站上提到的那样

我认为一个“肮脏”的小把戏是将字体转换为SVG，并在CSS中使用它，因为它是部分支持的（因为它也写在他们的网站上）

差不多

.icon{

 background-image: url(icon.svg);
 -o-background-size: 100% 100%;
 -webkit-background-size: 100% 100%;
}

再看看上面的链接

更新

Opera mini不支持IOS 6.1中的FontAwesome

其他字体面示例都不起作用（）

但使用SVG似乎是一个很好的解决方案，这是概念的证明 原始资料来源： 以上演示的更多信息：

OPERA MOBILE解决方案（无OPERA Mini）

我尝试了两个在线字体转换工具。首先，我将原始svg转换为ttf。然后我把.ttf转换成.eot、.woof和.otf

---

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

作为参考，我遇到了这个问题，问题是域。一些浏览器，尤其是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;

错误的内容类型可能会导致字体无法加载，因此会丢失图标。

---

有这些信息作为参考很好：）

我也是，我在黑莓手机上显示SVG字体时遇到了问题。问题是svg的名称（在文档中）和字体系列的名称必须相同。我在这里找到了这个答案，在对最后一个答案的评论中：

去

推屁股

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;

 @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";}