我们刚刚开始使用 Amazon Cloudfront 的 CDN 来加载我们的文件,但我们无法在 Firefox 中加载 @font-face 字体。根据一些建议,我们将以下代码添加到我们的 htaccess 文件中,但它似乎并没有解决问题。
<FilesMatch "\.(ttf|ttc|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
字体有时会显示,但我们仍然会在控制台中看到每种字体的错误。您可以在http://wiredimpact.com查看.
另外,我用来了解这个的主要 WordPress 帖子是 http://wordpress.org/support/topic/plugin-w3-total-cache-font-face-not-working-in-firefox?replies=21 .
关于如何在 Firefox 中正确加载字体有什么建议吗?
谢谢。
编辑:
我将 htaccess 中使用的代码调整为:
<FilesMatch "\.(ttf|ttc|otf|eot|woff|font.css)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*.wiredimpact.com"
</IfModule>
</FilesMatch>
这不仅添加了 font.css 文件,这似乎对 Firefox 有帮助,而且它也只从我们的子域加载,这对于安全目的来说更好。字体现在似乎正在 Firefox 中加载,但错误仍显示在控制台中。
最佳答案
如 icoMoon fonts doesn't show-up on Firefox 中所述通过@meaganoff:
I was having issues with icomoon and Firefox as well. Have you tried Paul Irish's 'bulletproof'
@font-face
syntax? It's a little different than what icomoon outputs and I've had better luck with it - no FF issues since.@font-face { font-family: 'Graublau Web'; src: url('GraublauWeb.eot?') format('eot'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf')
format('truetype'); }
而且工作起来很有魅力!
关于Firefox 字体跨站访问错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12012307/