apache - @font-face 字体只适用于它们自己的域

Question

我正在尝试创建一种在我的网站上使用的字体存储库，这样我就可以在我的 css 中调用存储库中的任何字体，而无需任何其他设置。为此，我创建了一个子域，在该子域上放置了存储库中每种字体的文件夹，其中包含每种字体的各种文件类型。我还在子域的根目录下放置了一个名为 font-face.css 的 css 文件，并在其中填充了每种字体的 @font-face 声明，字体与绝对链接相关联，以便它们可以在任何地方使用。

我的问题是，我似乎只能在它们所在的子域上使用字体，在我的其他网站上字体不显示。使用 Firebug ，我确定 font-face.css 文件已成功链接并加载。那么为什么字体不能正确加载呢？字体文件或其他东西有保护吗？我正在使用我应该被允许使用的所有字体，所以我不明白为什么会这样。也许这是一个 apache 问题，但是当我链接到它时我可以很好地下载字体。

哦，澄清一下，我的设置并没有侵犯任何版权，我使用的所有字体都已获得允许此类事情的许可。然而，我想设置一种只有我才能访问这个字体库的方法，但那是另一个元素。

Answer 1

这是因为 Firefox(从你提到的 Firebug)认为跨域，甚至子域，Web 字体嵌入不是一个好主意。

您可以通过将此添加到提供字体的子域的顶级 .htaccess 文件来说服它从您的子域加载字体(已更新以适应来自同一文件的代码HTML5 Boilerplate ):

<FilesMatch "\.(ttf|ttc|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

对此的回应:

I would however like to set up a way that only I can have access to this repository of fonts but that's another project.

W3C spec for Access-Control-Allow-Origin除了通配符 "*" 或特定域之外，什么也没有说。到目前为止，我找到了 this SO answer这建议验证 Origin header ，但我认为这是一个仅限 Firefox 的 header 。我不确定其他浏览器(它们甚至不需要上面的 .htaccess 技巧来让跨域 Web 字体工作)。