css – @ font-face字体只能在自己的域上工作

前端之家收集整理的这篇文章主要介绍了css – @ font-face字体只能在自己的域上工作前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图创建一种类型的字体库在我的网站上使用,以便我可以调用存储库中的任何字体在我的CSS,没有任何其他设置。为此,我创建了一个子域,我为其中包含每种字体的各种文件类型的存储库中的每种字体放置文件夹。我还在子域的根上放置了一个名为font-face.css的css文件,并为每个字体填充了@ font-face声明,字体使用绝对链接链接,以便可以从任何地方使用。

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

哦,只是为了澄清,我没有违反任何版权的设置,所有的字体,我使用是授权允许这种事情。但我想建立一种方式,只有我可以访问这个存储库的字体,但这是另一个项目。

解决方法

这是因为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头,但我认为这是一个仅Firefox的头。我不确定其他浏览器(他们甚至不需要.htaccess上面的跨域Web字体工作)。

原文链接:https://www.f2er.com/css/223180.html

猜你在找的CSS相关文章