使用 font-face 加载外部 css答案

【问题标题】：Load external css with font-face使用 font-face 加载外部 css
【发布时间】：2013-08-20 02:38:52
【问题描述】：

我知道 font-face 不允许在某些浏览器中使用外部 url 字体（例如，这在 Firefox 中不起作用）。

但最近我发现了一个插件“video-js”，它可以帮助你在视频播放器中嵌入视频。该插件的 css 文件包含一个名为 vjs 的字体。

为什么我可以使用他们的托管版本，而他们的自定义字体“vjs”仍然可以在我的网站 server1.example.com 上使用？

<link href="http://vjs.zencdn.net/4.1/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.1/video.js"></script>

一旦我在我的第二个网络服务器 server2.example.com 上托管 css，它将不再工作，直到我将文件移回 server1.example.com 或使用 zencdn 托管的版本。

这是为什么呢？他们是否修改了 Web 服务器中的某些设置？

【问题讨论】：

标签： css url font-face external absolute

【解决方案1】：

默认情况下，Firefox 不允许跨域请求自定义字体。我仍然不明白他们为什么不允许这样做，但是您可以通过在字体请求中添加 Access-Control-Allow-Origin 标头来解决它。在 Apache 中，你会做这样的事情：

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
<FilesMatch "\.(ttf|otf|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

【讨论】：

那么我必须在 server1 或 server2 的 Apache 上设置吗？
Server1 被你骗了，我相信。