Firefox 字体跨站访问错误

Question

我们刚刚开始使用 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 中加载，但错误仍显示在控制台中。

Answer 1

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

而且工作起来很有魅力!