internet-explorer - Font Awesome无法在Firefox和IE中使用

Question

我遇到了wordpress网站中包含的超棒字体问题。
在Firefox和IE中，这些图标根本不会显示，但是在Chrome和Safari中，它可以正常工作。

我找到了“解决方案”，说我需要带有某些内容的.htaccess才能为这些浏览器提供支持，但是，如果我使用这种方法，则Safari和Chrome本身会突然出现问题，而Firefox和IE仍然无法正常工作。

有人还有其他想法吗？

这是加载我的网站时firefox dev错误日志发出的错误消息:

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

谢谢您的帮助!

P.S.顺便说一下，字体很棒的网站上的图标在FF中可以正常工作。

更新*

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

更新2 *

我找到了解决方法-

在将css中的所有路径从相对更改为绝对(即www.mysite.de/fonts/...而不是/fonts/...)并添加包含以下几行的.htaccess文件后:

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

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

希望遇到同样问题的人能从中得到一些帮助。

Answer 1

我知道这是一篇旧文章，但这确实帮助我找出了一些问题。

我已经启用了标准的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 "*"
  </IfModule>
</FilesMatch>