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

Question

我知道 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>

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

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

Answer 1

默认情况下，Firefox 不允许跨域请求自定义字体。我仍然不明白为什么他们不允许这样做，但是您可以通过将 Access-Control-Allow-Origin header 添加到字体请求来解决这个问题。在 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>