小编典典

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

css

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

我的问题是,似乎只能在字体所在的子域上使用字体,而在其他站点上则无法显示该字体。使用firebug,我确定font-
face.css文件已成功链接并加载。那么为什么字体无法正确加载?字体文件有保护吗?我使用了应该允许使用的所有字体,所以我不明白为什么会这样。也许这是一个Apache问题,但是当我链接到该字体时,我可以下载该字体。

哦,为了澄清一下,我没有通过设置此设置来侵犯任何版权,我正在使用的所有字体都被许可使用以允许这种事情。但是,我想建立一种方法,只有我可以访问此字体库,但这是另一个项目。


阅读 274

收藏
2020-05-16

共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字体)。

2020-05-16