Question

我遇到了字体真棒的问题，它包含在wordpress网站中。在Firefox和IE中，图标根本不显示，但在Chrome和＆amp; 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 泽勒：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“）; }

谢谢你的帮助！

P.S。顺便说一句，字体真棒网站上的图标在FF中运行良好。

更新*

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

更新2 *

我找到了修复 -

将css中的所有路径从相对位置更改为绝对位置（即www.mysite.de/fonts / ...而不仅仅是/ fonts / ...）并添加包含以下行的.htaccess文件： / p>

<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建议的内容适用于所有浏览器：< / p>

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

Answer 3

如果您希望Firefox在计算机上安装时使用该字体，则需要添加本地规则。请参阅https://developer.mozilla.org/Web/CSS/@font-face。

@font-face { font-family: 'FontAwesome'; src: local(''FontAwesome'); }

Answer 4

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css" media="all" rel="stylesheet" type="text/css">

将此行添加到您正在使用的主题的header.php文件中。这个修复对我有用。

Font Awesome在Firefox＆amp; IE

4 个答案: