10

我遇到了 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 Quelldatei：http ://mysite.de/wp-content/themes/heat/style.css Zeile：0 Quelltext：@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"); }

谢谢你的帮助！

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，但似乎这是问题所在。

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

4

4 回答 4

9

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

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

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

<FilesMatch ".(ttf|otf|eot|woff)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>
于 2013-10-03T14:31:25.593 回答
2

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

@font-face { font-family: 'FontAwesome'; src: local(''FontAwesome'); }
于 2014-05-19T07:40:00.937 回答
2

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

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

@font-face{ font-family:'FontAwesome'; src:url('../_fonts/fontawesome-webfont.eot'); }
于 2013-08-05T14:51:58.213 回答
1 
<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 文件中。这个修复对我有用。

于 2014-07-03T10:51:32.110 回答