21

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

有谁知道这个问题？并且，有解决方案吗？

谢谢

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

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

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

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

在此处输入图像描述

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

在此处输入图像描述

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

4

10 回答 10

7

There are a couple different issues I would look into that I hope help you fix it.

If you mention what font worked we could probably help out better. I would compare the font that you said worked with FontAwesome to see what the differences are. I would bet the glyphs are mapped to a different unicode area and maybe the browser doesn't read from there?

You could use a tool like Font Forge to check differences from other fonts. I noticed when trying to re-generate the FontAwesome font from Font Forge I got validation errors with the em spacing and the glyphs had errors (self-intersecting, wrong direction, missing points at extrema). I've seen this before in icon fonts and never had an issue but I haven't tested on Opera before either. If you compare trying to generate a font with something that works you could probably narrow the issue down.

Other Stuff I'm sure you covered but double checking:

I read here that having a local version of the font installed might conflict with the font embed. https://github.com/FortAwesome/Font-Awesome/issues/247

If you took the icon-font and then added your own glyphs to it then used something like font squirrel to generate all the web safe formats make sure you told the generator to add the unicode range of the glyphs you created. Once I forgot to do this and the app only added the glyphs in the a-z range. An easy way to check is to look at the gyphs tab in the demo html page and make sure all the icons are included.

You're using the proper CSS3 font-face rule and embedding eot, ttf, woff, and svg and you've waited a little bit. I noticed on some old iphones the font takes forever to display.

Using a tool like modernizr font-face feature detect might make some of the support between browsers a little easier.

I'm curious to see what the issue is.

于 2013-03-04T05:41:36.430 回答
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 ios中的字体真棒错误

其他字体示例都不起作用（http://codepen.io/bennettfeely/full/ErFGv） 在此处输入图像描述

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

在此处输入图像描述

于 2013-03-06T00:59:22.037 回答
3

Opera MOBILE 解决方案（无 Opera Mini）

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

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

于 2013-03-06T19:15:13.970 回答
3

  1. 访问http://icomoon.io/app/

  2. 按钮图标库

  3. 添加库字体真棒

  4. 选择你想要的图标

  5. 按钮字体（将图标导出为 css 字体真棒）

  6. 用新的 Fonts Awesome 替换 Fonts Awesome (ttf, svg. etc...)

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 中工作:)

于 2013-08-29T14:15:14.563 回答
2

为此，我知道 Opera Mini 中支持 @font-face，而 Andoroid 从 2.2 到 3.0 中只有部分 @font-face 支持（早期的 Android 版本根本没有 @font-face 支持）。见：http ://caniuse.com/fontface

我知道的部分支持意味着它们不支持受 DRM 保护的字体，并且某些语法（例如“笑脸”语法）对它们不起作用。

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

于 2013-02-28T18:10:22.867 回答
2

FortAwesome 报告了此类错误：

  1. https://github.com/FortAwesome/Font-Awesome/issues/246
  2. https://github.com/FortAwesome/Font-Awesome/issues/791

它们尚未修复，他们已联系 Opera 开发人员关系以找出导致此问题的原因。除了等待他们修复它之外，您别无选择。跟踪错误以了解更多信息。

于 2013-03-03T12:17:40.523 回答
1

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

<meta charset="UTF-8">

或者

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

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

@charset "utf-8";
于 2013-02-28T22:13:34.047 回答
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;

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

于 2013-06-07T04:43:36.033 回答
0

use icomoon app http://icomoon.io/app/ to change the svg font to web fonts and replace the old font for Font Awesome . it works for me in opera mobile

于 2014-05-10T13:03:47.053 回答
0

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

黑莓操作系统 7 上的 @fontface

于 2013-07-01T11:50:24.567 回答