58

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

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

哦，澄清一下，我的设置并没有侵犯任何版权，我使用的所有字体都被许可允许这种事情。但是，我想设置一种只有我才能访问此字体存储库的方式，但那是另一个项目。

4

4 回答 4

94

这是因为 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 字体工作）。

于 2010-05-23T17:26:34.557 回答
8

在 Firefox 中解决此问题的另一种方法是使用 base64 编码将字体直接嵌入到 css 文件中。如果您无法访问上面提到的某些配置，则特别漂亮。

您可以在fontsquirrel.com上生成必要的代码：在 font-face Kit Generator 中选择专家模式，向下滚动并选择 CSS Options 下的 Base64 Encode - 下载的 Font-Kit 将可以即插即用。

这还具有减少页面加载时间的附带好处，因为它需要更少的 http 请求。

于 2011-07-26T16:01:01.497 回答
4

如果您不想允许来自所有域的资源，而只允许来自站点子域的资源，您应该这样做：

# Allow font, js and css to be loaded from subdomain
SetEnvIf Origin "http(s)?://(.+\.)?(example\.com)$" ORIGIN_DOMAIN=$0
<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>

来源：http ://www.webspeaks.in/2015/01/wordpress-allow-cross-domain-resources.html

于 2015-01-03T06:19:30.007 回答
1

在“专家”模式下使用http://www.fontsquirrel.com/fontface/generator并选择 base64 作为选项会返回一个 stylesheet.css，其中包含必要的 base64 编码数据以在我们的样式表中使用。似乎在我们测试过的所有浏览器中都可以使用，除了 IE8。

在将主题应用到 3rd 方工具（例如我们被迫托管字体的萨尔萨请愿书）时，我们最常遇到这个问题。

谢谢各位的帮助！

于 2012-04-20T21:16:53.610 回答