如何修改HTTP头部 / 火狐浏览器CORS中的@fontface问题

Question

我的图标字体在火狐浏览器中未能正确显示，出现了“bad URI or cross-site access not allowed”的错误提示。据我所知，需要按照下面的图片所示进行操作。我已经阅读了所有关于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的主题文件夹中，所有文件都在同一台服务器上。

- sheriffderek

---

“添加到 .htaccess” 部分似乎暗示了您需要执行哪些操作才能实现 “HTTP 标头” 部分。您尝试过吗？还要注意，这似乎与 WordPress 无关，可能更适合在 SE 网络的其他网站上提问。 - Rarst

嗯，有一些特定于WordPress的方法可以在功能中添加HTTP头信息，但只要最佳位置适合我就可以。谢谢。虽然它可能会暗示一些东西，但对于我来说不够清晰。我会上传我的当前.htaccess文件的样子。 - sheriffderek

虽然WP可以并且确实可以操作标题，但它只是为自己的页面这样做。静态资源（现有文件-图像、样式、字体等）不受该处理的影响，并且通常被WP忽略以由Web服务器设置处理。 - Rarst

你正在加载的字体文件是否托管在“sourceofyoga.com”上？页面本身托管在哪个域名下？（是不同的域名吗？） - Jim

是的。此网站的所有文件都托管在同一域上。我添加了一个文件结构的图片，以防有所帮助。 - sheriffderek

Answer 1

我建议使用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>

对我们来说，这个非常好用，顺便提一下。

- rhodesjason

Answer 2

这可能是你在FilesMatch中使用的正则表达式。你提到的示例中，字体css文件的扩展名为.font.css，这就是正则表达式所寻找的内容。根据你当前的.htaccess文件，ss-social-circle.css没有匹配该表达式，因此没有得到头部信息。

尝试将<FilesMatch ...>行更改为以下内容：

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

看看是否开始工作。

祝你好运！

- Jeff Cooper

---

我尝试了一下，然后又尝试了几个你的想法让我想到的不同的东西，但目前为止还没有任何进展。我的WordPress安装在一个子文件夹中 - 所以我正在研究这个，并确保任何更深层次的.htaccess文件也被更改了 - 但目前为止还没有运气。 - sheriffderek