@ 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>

对此:

然而,我想设置一种方式,只有我可以访问这个字体存储库,但这是另一个项目.

在为W3C规范Access-Control-Allow-Origin不说什么比任何一个通配符多个"*"或一个特定的域.到目前为止,我发现这个SO答案建议验证Origin标题,但我认为这是一个仅限Firefox的标题.我不确定其他浏览器(他们甚至不需要.htaccess上面的技巧来使跨域Web字体工作).

Answer 2

在Firefox中修复此问题的另一种方法是使用base64编码将字体直接嵌入到css文件中.如果您无法访问上面提到的某些配置,那就特别好了.

您可以在fontsquirrel.com上生成必要的代码:在font-face Kit Generator中选择专家模式,向下滚动并选择CSS选项下的Base64 Encode - 下载的Font-Kit将可以即插即用.

这也有减少页面加载时间的附带好处,因为它需要少一个http请求.