字体真棒不工作在Firefox& IE [英] Font Awesome not working in Firefox & IE

问题描述

我遇到一个包含在wordpress站点中的字体问题。
在Firefox和IE中，图标根本不会显示，但是在Chrome& Safari浏览器工作正常。

我发现解决方案，说我需要一个.htaccess与某些内容来提供这些浏览器的支持，但是，如果我使用这种方法Safari浏览器和Chrome浏览器突然出现问题，Firefox和IE浏览器仍然无法正常工作。

有没有人有任何进一步的想法？

以下是加载我的网站时由firefox dev错误日志输出的错误消息：
$ b

Fehler：可下载的字体：下载失败（font-family：icomoonstyle：normal weight：normal stretch：normal src index：2）：不允许URI或跨站点访问
source： http://mysite.de/wp-content/themes/heat/fonts/icomoon/icomoon.woff < a>
Quelldatei： http://mysite.de/wp-content /themes/heat/style.css
Zeile：0
Qu elltext：
@ font-face {font-family：icomoon; font-style：normal; font-weight：正常; src：url（fonts / icomoon / icomoon.eot？#iefix）格式（embedded-opentype），url（fonts / icomoon / icomoon.svg＃icomoon）格式（svg fonts / icomoon / icomoon.woff）格式（woff），url（fonts / icomoon / icomoon.ttf）格式（truetype）; }

感谢您的帮助！

更新*
>

确定阅读了很多关于这个问题的论坛帖子后，我得出以下结论：
大多数人都有这个问题，因为他们正在从外部加载他们的字体服务器。通过添加.htaccess代码来允许FF做到这一点，他们正在解决他们的问题。现在，因为我从我自己的服务器加载字体，.htaccess方法并没有帮助我。然而，摆脱了上面显示的错误信息是什么改变了从相对于绝对路径的CSS中的字体的路径。现在有趣的是 - 加载网站时，错误消息不再显示，但图标也不会！仍然没有改变，但没有错误信息。我很困惑！

• 更新2 *

我找到了一个修正 -

将css中的所有路径从相对于绝对（即www.mysite.de/fonts /改为...），然后添加包含以下行的.htaccess文件：

$ $ $ $ $ $ c $< FilesMatch。 TTF | OTF | EOT | WOFF）$>
< IfModule mod_headers.c>
Header set Access-Control-Allow-Origin*

< / FilesMatch>

到/ fonts目录，在Firefox，Chrome和Safari中一切正常。还没有机会检查IE，但似乎这是问题。

希望遇到相同问题的人会得到一些帮助。

解决方案

我知道这是一个旧的帖子，但它确实帮我弄清楚了一些问题。 b

我有标准的apache配置和mod_headers启用。

我有一个 / font / DOCUMENT_ROOT 中添加一个 .htaccess 文件夹（< DOCUMENT_ROOT> ; /font/.htaccess ）与Markus建议的所有浏览器一起工作：

  < FilesMatch。（ttf | otf | eot | woff）$> 
< IfModule mod_headers.c> 
 Header set Access-Control-Allow-Origin*
  
< / FilesMatch> 
  

I'm having an issue with font awesome which is included into a wordpress site. In Firefox and IE the icons won't show at all, however in Chrome & Safari it works fine.

I have found "solutions" which say I need an .htaccess with certain content to provide support for these browsers, however, if i use this approach, Safari and Chrome are suddenly having issues themselves and Firefox and IE are still not working.

Does anyone have any further ideas?

Here is the error message put out by the firefox dev error log when loading my site:

Fehler: downloadable font: download failed (font-family: "icomoon" style:normal weight:normal stretch:normal src index:2): bad URI or cross-site access not allowed source: http://mysite.de/wp-content/themes/heat/fonts/icomoon/icomoon.woff Quelldatei: http://mysite.de/wp-content/themes/heat/style.css Zeile: 0 Quelltext: @font-face { font-family: "icomoon"; font-style: normal; font-weight: normal; src: url("fonts/icomoon/icomoon.eot?#iefix") format("embedded-opentype"), url("fonts/icomoon/icomoon.svg#icomoon") format("svg"), url("fonts/icomoon/icomoon.woff") format("woff"), url("fonts/icomoon/icomoon.ttf") format("truetype"); }

Thanks for you help!

P.S. The icons on the font awesome website work fine in FF by the way.

• UPDATE *

ok after reading a lot of forum posts on this issue i have come to the following conclusion: most people are having this issue because they are loading their fonts from an external server. by adding the .htaccess code to allow FF to do just that, they are solving their issue. now, since i'm loading my fonts from my own server, the .htaccess approach did not help me. what did get rid of the error message shown above however, was changing the path to the font in the css from a relative to an absolute path. now the funny thing is -- the error message does not show up any longer when loading the site, but the icons don't either! still no change, yet no error message. I'm confused!

• UPDATE 2 *

I found a fix --

After changing all the paths in the css from relative to absolute (i.e. www.mysite.de/fonts/... instead of just /fonts/...) AND adding the .htaccess file containing the following lines:

<FilesMatch ".(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

to the /fonts directory, everything works fine in Firefox, Chrome and Safari. Haven't had a chance to check IE yet, but it appears that this was the issue.

Hope someone who runs into the same issues will get some help from this.

解决方案

I know this is an old post, but it did help me figure out some issues.

I have the standard apache configuration and mod_headers enabled.

I have a /font/ folder in the DOCUMENT_ROOT , adding an .htaccess in such folder (<DOCUMENT_ROOT>/font/.htaccess) with the content suggested by Markus worked on all the browsers:

<FilesMatch ".(ttf|otf|eot|woff)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

这篇关于字体真棒不工作在Firefox&amp; IE的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！