Font Awesome 在 Firefox 和 IE 中不起作用

Posted 2023-03-15

【中文标题】Font Awesome 在 Firefox 和 IE 中不起作用

【英文标题】：Font Awesome not working in Firefox & IE

【发布时间】：2013-07-23 18:58:14

【问题描述】：

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

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

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

这是加载我的网站时 Firefox 开发错误日志输出的错误消息：

Fehler：可下载字体：下载失败（字体系列：“icomoon”样式：正常粗细：正常拉伸：正常 src 索引：2）：不允许 URI 或跨站点访问 来源：http://mysite.de/wp-content/themes/heat/fonts/icomoon/icomoon.woff 奎尔达泰：http://mysite.de/wp-content/themes/heat/style.css 蔡勒：0 静物语： @font-face font-family: "icomoon";字体样式：正常；字体粗细：正常； src: url("fonts/icomoon/icomoon.eot?#iefix") 格式("embedded-opentype"), url("fonts/icomoon/icomoon.svg#icomoon") 格式("svg"), url("字体/icomoon/icomoon.woff") 格式("woff"), url("fonts/icomoon/icomoon.ttf") 格式("truetype");

感谢您的帮助！

附：顺便说一句，字体真棒网站上的图标在 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，但似乎这是问题所在。

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

【问题讨论】：

我也有同样的问题。当我使用较少的文件而不是 css 时，字体工作正常（我在 ASP MVC 4 中工作）。

【参考方案1】：

我知道这是一篇旧帖子，但它确实帮助我解决了一些问题。

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

我在 DOCUMENT_ROOT 中有一个 /font/ 文件夹，在该文件夹 (<DOCUMENT_ROOT>/font/.htaccess) 中添加了一个 .htaccess，其中包含 Markus 建议的内容，适用于所有浏览器：

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

【讨论】：

这解决了我的问题。 Font Awesome 没有在 Godaddy 中显示，而是在本地主机上。将此添加到我的 .htaccess 中，现在一切正常。

【参考方案2】：

如果你和我一样，修改 web.config 文件是你不能碰的。

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

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

【参考方案3】：

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

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

【参考方案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 文件中。这个修复对我有用。