@font-face 字体仅适用于自己的域 [英] @font-face fonts only work on their own domain

问题描述

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

I am trying to create a type of font repository for use on my websites, so that I can call to any font in the repository in my css without any other set-up. To do this I created a subdomain on which I placed folders for each font in the repository that contained the various file types for each font. I also placed a css file called font-face.css on the root of the subdomain and filled it with @font-face declarations for each of the fonts, the fonts are linked with an absolute link so that they can be used from anywhere.

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

My issue is that it seems that I can only use the fonts on that subdomain where they are located, on my other sites the font does not show. Using firebug I determined that the font-face.css file was successfully being linked to and loaded. So why does the font not correctly load? Is there protection on the font files or something? I am using all fonts that I should be allowed to do this with, so I don't see why this is occurring. Maybe it is an apache issue, but I can download the font just fine when I link to it.

哦，为了澄清一下，我设置这个并没有侵犯任何版权，我使用的所有字体都被许可允许这种事情.然而，我想设置一种方式，只有我可以访问这个字体库，但这是另一个项目.

Oh, and just to clarify, I am not violating any copyrights by setting this up, all the fonts I am using are licensed to allow this sort of thing. 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.

推荐答案

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

This is because Firefox (from your mention of Firebug) thinks cross-domain, even subdomain, Web font embedding is a bad idea.

您可以说服它从您的子域加载字体，方法是将其添加到提供您的字体的子域的顶级 .htaccess 文件(更新以适应来自同一文件的代码)HTML5 样板):

You can convince it to load fonts from your subdomain by adding this to the top-level .htaccess file of the subdomain where your fonts are being served (updated to adapt code from the same file in 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 规范对于 Access-Control-Allow-Origin 仅表示通配符 "*" 或特定域.到目前为止，我已经找到了这个答案这建议验证 Origin 标头，但我认为这是一个仅限 Firefox 的标头.我不确定其他浏览器(它们甚至不需要上面的 .htaccess 技巧就可以使跨域 Web 字体工作).

The W3C spec for Access-Control-Allow-Origin doesn't say anything more than either a wildcard "*" or a specific domain. So far, I've found this SO answer which suggests validating the Origin header, but I think that's a Firefox-only header. I'm not sure about other browsers (they don't even need the .htaccess trick above for cross-domain Web fonts to work).

这篇关于@font-face 字体仅适用于自己的域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！