字体真棒图标在某些浏览器中不工作

我使用的是Bootstrap +字体真棒，并且大多数桌面和移动浏览器都可以，但字体真棒图标不适用于Opera Mobile，Opera Mini和Opera某些版本的Android浏览器。只显示一个空白的矩形。字体真棒图标在某些浏览器中不工作

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

感谢

[编辑2013年3月6日！重要] 我找不到任何明显的问题，所以我试着用闻所未闻的解决方案。我尝试过两种在线字体转换工具。首先，我使用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仍然无法正常工作......

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

enter image description here

[编辑2013年3月3日] 问题不只是我的网站，字体真棒网站的例子和测试不工作...

enter image description here

[编辑2013-03-4] 我试图使用Modernizr“font-face”功能检测作出回退，但Opera Mobile和BlackBerry 6因为支持该功能而返回true。 如何检测FontAwesome字体是否已加载？

来源

2013-02-22 Gonzalo

是否启用图像？ – Zaffy 2013-02-28 18:19:01

启用了其他图像？是。我放了一个PNG图标，以显示它们正在正常工作 – Gonzalo 2013-02-28 18:34:57

您可以发布您正在用于调用fontawesome的css – Shail 2013-03-01 13:01:00

因为我知道在Opera Mini中支持@ font-face，并且在2.2到3.0版本的Andoroid中只支持部分@ font-face（早期的Android版本没有@ font-face支持）。请参阅：http://caniuse.com/fontface

从我所知道的部分支持意味着他们不支持受DRM保护的字体，某些语法（如“笑脸”语法不适用于他们。

所以，如果你想在Opera Mini和Android 2.1上显示图标，你需要使图像回退到图像图标。如果你有Android 2.2-3.0的问题，你可以修改它的语法。

来源

2013-02-28 18:10:22

Opera mobile 10+支持@ font-face，所以问题可能是另一个。我用@ font-face尝试了另一种服务器字体，并且可以正常工作，但使用FontAwesome时，我无法正确显示图标。 – Gonzalo 2013-02-28 19:14:53

我试图使用Modernizr“font-face”功能检测进行回退，但opera和BlackBerry 6都会返回true，因为它们支持该功能。 **如何检测FontAwesome字体是否已加载？** – Gonzalo 2013-03-04 20:37:31

问题不在于@ font-face。它支持歌剧移动10+和黑莓6+ 字体真棒字体不使用DRM，并且样式表不包含“笑脸”语法谢谢，但在这种情况下，这不是最好的答案。 – Gonzalo 2013-03-07 16:48:05

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

<meta charset="UTF-8">

或

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

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

@charset "utf-8";

来源

2013-02-28 22:13:34 dusthaines

是的，我在文档和样式表中声明了Charset UTF8，但这不是问题。 – Gonzalo 2013-02-28 23:47:44

这种错误被报告为FortAwesome：

他们还没有最后确定，他们所接触的歌剧dev的关系，找出是什么原因造成这一点。除了等待他们解决问题之外，你没有太多选择。跟踪错误以了解更多信息。

来源

2013-03-03 12:17:40 user568109

我会研究几个不同的问题，希望能帮助您解决问题。

如果你提到什么字体的工作，我们可以帮助更好。我会比较你说的与FontAwesome一起工作的字体，看看有什么不同。我敢打赌，字形映射到一个不同的unicode区域，也许浏览器不会从那里读取？

您可以使用Font Forge等工具来检查与其他字体的差异。我注意到当试图从Font Forge重新生成FontAwesome字体时，我得到了与em间距的验证错误，并且字形出现了错误（自相交，错误方向，极值点丢失）。我以前在图标字体中看到过这个，从来没有问题，但我还没有在Opera上测试过。如果您尝试使用某种可行的方法生成字体，则可以缩小问题的范围。

其他的东西，我敢肯定，你包括在内，但双重检查：

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

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

您正在使用正确的CSS3字体规则并嵌入eot，ttf，woff和svg，并且您已经等了一会儿。我注意到一些旧的iPhone手机需要永久显示字体。

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

我很好奇，看看问题是什么。因为它是在官方网站上提到的

来源

2013-03-04 05:41:36 Jesse

我试图使用Modernizr“font-face”功能检测进行回退，但opera和BlackBerry 6都会返回true，因为它们支持该功能。 **如何检测FontAwesome字体是否已加载？** – Gonzalo 2013-03-04 20:38:12

什么字体有效？如果你尝试谷歌字体和那些工作，我猜测它的字形映射与字体真棒。 – Jesse 2013-03-05 07:58:59

许多Web字体正在工作。事实上，唯一不起作用的字体是FontAwesome。我测试了一些Google字体，例如：** http：//fonts.googleapis.com/css？family = Devonshire **。 @ font-face { font-family：'德文郡'; font-style：normal; font-weight：400; src：local（'Devonshire-Regular'），url（http://themes.googleusercontent.com/static/fonts/devonshire/v2/aaQyvbEWf33gEr0fgtqsrRsxEYwM7FgeyaSgU71cLG0.woff）format（'woff'）; } – Gonzalo 2013-03-05 10:31:40

的Opera Mini不支持字体面 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

UPDATE

的Opera Mini不支持FontAwesome在IOS 6.1 font awesome fault in ios

NEIT她的其他字体面的实例工作（http://codepen.io/bennettfeely/full/ErFGv） enter image description here

但使用SVG似乎是一个很好的解决方案，这个概念原始来源的证明：http://coding.smashingmagazine.com/2012/01/16/resolution-independence-with-svg/

enter image description here

来源

2013-03-06 00:59:22 Theodore

： http://dbushell.com/demos/css-sprites/ 上面演示的更多相关信息

OPERA MOBILE解决方案（无Opera Mini）

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

最后，我替换了原来的文件，现在Opera mobile正常显示图标。

来源

2013-03-06 19:15:13 Gonzalo

作为参考，我有这个问题，问题是域。在某些浏览器中，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-07 04:43:36

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

@fontface on blackberry os 7

来源

2013-07-01 11:50:24 emik

转到http://icomoon.io/app/
按下按钮图标库
图书馆加入字体真棒
选择你想要的图标
按下按钮字体（出口图标CSS字体真棒）
替换字体真棒（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";}

我试试这个，然后真棒字体工作在Opera移动:)

来源

2013-08-29 14:15:14 Frin

使用icomoon应用http://icomoon.io/app/改变SVG字体到网页字体并替换Font Awesome的旧字体。它适用于歌剧手机中的我

来源

2014-05-10 13:03:47 Misikir

字体真棒图标在某些浏览器中不工作

回答

相关问题