如何让@ font-face使用Weebly在Firefox中运行

Question

我已成功使用@ font-face规则在Weebly网站上使用字体。那是......在Chrome中，而不是Firefox。我发现'hack'使用.htaccess文件。但Weebly不允许添加.htaccess文件。所以我回到原点...任何提示，任何人？

http://www.ziehaar.nl

Answer 1

Firefox中的字体呈现问题来自权限指令。出于安全原因，Firefox有一组针对font-face的指令，其中包含可怕的 "Same Origin Policy" 限制，这意味着您的字体必须从页面所在的同一域提供。因此，考虑到这一点，我们可以提供最简单的解决方案：

解决方案＃1

将您的字体托管在 www.ziehaar.nl （并警告：根据您网站上的.htaccess文件，www。部分会有所作为，这意味着您如果您输入 www.ziehaar.nl 但是如果您输入 ziehaar.nl

，则可能无法看到该字体

解决方案＃2 在其他地方托管字体，并查看this thread at Stack Overflow有关规避“相同来源政策”规则的方法。

解决方案＃3 将以下内容添加到.htaccess文件中：

<FilesMatch "\.(eot|otf|woff|ttf)$">
  SetEnvIf Origin »
    "^http(s)?://(.+\.)?(weebly\.com|ziehaar\.nl)$" origin_is=$0
  Header set Access-Control-Allow-Origin %{origin_is}e env=origin_is
</FilesMatch>

根据您的技能，您可能会尝试使用不同的解决方案，直到它起作用，但只是为了它并显示除了跨域策略之外的所有内容都很好，请看下面的图像：

正如您所看到的，我在测试后在Firefox中正确地看到了您的字体。那是因为我加载了你的字体文件，现在它们在我的Firefox缓存中，因此跨域不会影响这些字体的渲染。

无论如何，希望这有帮助，让我们知道它是怎么回事