CSS @font-face 字体仅适用于自己的域
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2892691/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
@font-face fonts only work on their own domain
提问by Ben Kulbertis
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-facedeclarations for each of the fonts, the fonts are linked with an absolute link so that they can be used from anywhere.
我正在尝试创建一种在我的网站上使用的字体存储库，以便我可以在我的 css 中调用存储库中的任何字体，而无需任何其他设置。为此，我创建了一个子域，在该子域上放置了存储库中每种字体的文件夹，其中包含每种字体的各种文件类型。我还在子域的根目录下放置了一个名为 font-face.css 的 css 文件，并用@font-face每种字体的声明填充它，这些字体通过绝对链接链接，以便它们可以在任何地方使用。
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.
我的问题是，我似乎只能使用它们所在子域上的字体，而在我的其他站点上，字体不显示。使用 firebug 我确定 font-face.css 文件已成功链接并加载。那么为什么字体没有正确加载呢？字体文件或其他东西有保护吗？我正在使用我应该被允许使用的所有字体，所以我不明白为什么会发生这种情况。也许这是一个 apache 问题，但是当我链接到它时，我可以很好地下载字体。
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.
哦，为了澄清一下，我设置这个并没有侵犯任何版权，我使用的所有字体都被许可允许这种事情。然而，我想设置一种只有我可以访问这个字体库的方式，但这是另一个项目。
回答by BoltClock
This is because Firefox (from your mention of Firebug) thinks cross-domain, even subdomain, Web font embedding is a bad idea.
这是因为 Firefox（从你提到的 Firebug）认为跨域，甚至子域，Web 字体嵌入是一个坏主意。
You can convince it to load fonts from your subdomain by adding this to the top-level .htaccessfile of the subdomain where your fonts are being served (updated to adapt code from the same file in HTML5 Boilerplate):
您可以说服它从您的子域加载字体，方法是将其添加到提供字体的子域的顶级.htaccess文件中（更新以适应HTML5 Boilerplate 中同一文件中的代码）：
<FilesMatch "\.(ttf|ttc|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
In response to this:
对此的回应：
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.
然而，我想设置一种只有我可以访问这个字体库的方式，但这是另一个项目。
The W3C spec for Access-Control-Allow-Origindoesn't say anything more than either a wildcard "*"or a specific domain. So far, I've found this SO answerwhich suggests validating the Originheader, but I think that's a Firefox-only header. I'm not sure about other browsers (they don't even need the .htaccesstrick above for cross-domain Web fonts to work).
在为W3C规范Access-Control-Allow-Origin并没有再多说什么了比任何一个通配符"*"或一个特定的域。到目前为止，我发现这个 SO answer建议验证Origin标题，但我认为这是一个仅限 Firefox 的标题。我不确定其他浏览器（它们甚至不需要.htaccess上面的技巧就可以使跨域 Web 字体工作）。
回答by Pierre
Another way to fix this in Firefox is to embed the font directly into the css file using base64 encoding. Especially nifty if you don't have access to some of the configuration mentioned above.
在 Firefox 中解决此问题的另一种方法是使用 base64 编码将字体直接嵌入到 css 文件中。如果您无权访问上面提到的某些配置，那就特别好。
You can generate the necessary code on fontsquirrel.com: in the font-face Kit Generator choose expert mode, scroll down and select Base64 Encode under CSS Options - the downloaded Font-Kit will be ready to plug and play.
您可以在fontsquirrel.com上生成必要的代码：在 font-face Kit Generator 中选择专家模式，向下滚动并选择 CSS Options 下的 Base64 Encode - 下载的 Font-Kit 将准备好即插即用。
This also has the fringe benefit of reducing page load time because it requires one less http request.
这还具有减少页面加载时间的附带好处，因为它需要减少一个 http 请求。
回答by Arvind Bhardwaj
If you do not want to allow resources from all domains but only from sub domain of your site, you should do it like:
如果您不想允许来自所有域的资源而只允许来自站点的子域的资源，您应该这样做：
# Allow font, js and css to be loaded from subdomain
SetEnvIf Origin "http(s)?://(.+\.)?(example\.com)$" ORIGIN_DOMAIN=##代码##
<IfModule mod_headers.c>
<FilesMatch "\.(eot|font.css|otf|ttc|ttf|woff|js|png|jpg|jpeg|gif)$">
Header set Access-Control-Allow-Origin %{ORIGIN_DOMAIN}e env=ORIGIN_DOMAIN
</FilesMatch>
</IfModule>
Source: http://www.webspeaks.in/2015/01/wordpress-allow-cross-domain-resources.html
来源：http: //www.webspeaks.in/2015/01/wordpress-allow-cross-domain-resources.html
回答by Darko Hrgovic
Using http://www.fontsquirrel.com/fontface/generatorin "expert" mode and choosing base64 as an option returned a stylesheet.css with the necessary base64 encoded data to use in our stylesheet. Seems to work in all browsers we've tested except IE8.
在“专家”模式下使用http://www.fontsquirrel.com/fontface/generator并选择 base64 作为选项返回一个 stylesheet.css，其中包含在我们的样式表中使用的必要 base64 编码数据。似乎在我们测试过的所有浏览器中都有效，除了 IE8。
We run into this issue most when applying themes to 3rd party tools like salsa petition where we're forced to host the font.
在将主题应用于 3rd 方工具（例如我们被迫托管字体的 Salsa 请愿书）时，我们最常遇到此问题。
Thanks for all the help everyone!
谢谢各位的帮助！
