如何在firefox CORS中更改@fontface的HTTP头/问题

Question

我的图标字体在firefox中没有正确显示。我得到“糟糕的URI或不允许跨站点访问。”根据我的发现，我需要做下面图片中的内容。我已经阅读了有关HTTP标头如何工作的所有信息，但是我实际实现这一点的方法还有很大的空白。 .htaccess文件是我理解的，但第一行和.htaccess下面的Mime类型是一个完全的谜。我可以在firebug中看到标题。我在哪里编辑这些？我错过了什么？在任何地方，我看起来似乎暗示我应该知道这是什么 - 但是没有解释这个过程的这一部分。有人有答案吗？

我目前的.htaccess看起来像这样：

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# END WordPress


<FilesMatch "\.(ttf|ttc|otf|eot|woff|font.css)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "http://sourceofyoga.com"
  </IfModule>
</FilesMatch>

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf

。 。

字体位于名为source2013的主题文件夹中。所有文件都在同一台服务器上。

Answer 1

它可能是FilesMatch中的正则表达式。您引用的示例的字体css文件的扩展名为.font.css，这正是正则表达式所寻求的。根据您当前的.htaccess文件，ss-social-circle.css与表达式不匹配，因此无法获取标题。

尝试将<FilesMatch ...>行更改为：

<FilesMatch "\.(ttf|ttc|otf|eot|woff|css)$">

并查看它是否开始工作。

祝你好运！

Answer 2

我建议在http://html5boilerplate.com使用他们正在使用的任何内容，因为他们非常善于保持最新状态。目前，他们正在使用这个：

<IfModule mod_headers.c>
    <FilesMatch "\.(eot|font.css|otf|ttc|ttf|woff)$">
        Header set Access-Control-Allow-Origin "http://mysite.com"
    </FilesMatch>
</IfModule>

这对我们来说非常有用，仅供参考。