Font Awesome无法在Firefox和IE中使用

Question

我遇到了字体真棒的问题,它被包含在wordpress网站中.在Firefox和IE中,图标根本不显示,但在Chrome和Safari中它可以正常工作.

我找到了"解决方案",说我需要一个带有某些内容的.htaccess来为这些浏览器提供支持,但是,如果我使用这种方法,Safari和Chrome会突然出现问题,Firefox和IE仍无法正常工作.

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

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

Fehler:可下载的字体:下载失败(font-family:"icomoon"样式:正常权重:正常拉伸:正常src索引:2):错误的URI或跨站点访问不允许来源: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")格式("embedded-opentype"),url("fonts/icomoon/icomoon.svg#icomoon")格式("svg"),url(" fonts/icomoon/icomoon.woff")format("woff"),url("fonts/icomoon/icomoon.ttf")格式("truetype"); }

谢谢你的帮助!

PS顺便说一句,字体真棒网站上的图标在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>

Answer 2

如果您像我一样，修改 web.config 文件是不允许您触及的。

尝试将所有字体文件（.eot、.ttf 等）存储到它们自己的本地文件夹中，并链接到本地​​而不是 FontAwesome CDN。每次都帮我在IE和FF里清理掉。

@font-face{ font-family:'FontAwesome'; src:url('../_fonts/fontawesome-webfont.eot'); }