@ 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 Boilerplate ）：

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 没有说任何通配符*或特定域。到目前为止，我找到了此SO回答它建议验证 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屋！