font-face - 如何让 @font-face 使用 Weebly 在 Firefox 中工作

Question

我已成功使用 @font-face 规则在我的 Weebly 网站上使用字体。那是……在 Chrome 中，而不是在 Firefox 中。我找到了使用 .htaccess 文件的“hack”。但是 Weebly 不允许添加 .htaccess 文件。所以我回到第一方......任何提示，任何人？

http://www.ziehaar.nl

Answer 1

Firefox 中字体渲染的问题来自权限指令。出于安全原因，Firefox 有一组 font-face 指令，其中包括可怕的“同源策略”限制，这意味着您的字体必须来自页面所在的同一域。所以，考虑到这一点，我们可以有最简单的解决方案：

解决方案#1

在www.ziehaar.nl托管您的字体（并警告：根据.htaccess您网站中的文件，www. 部分会有所不同，这意味着如果您键入www.ziehaar.nl ，您可能会看到字体如果您键入ziehaar.nl，则看不到它

解决方案 #2 在其他地方托管字体，并查看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 缓存中，因此跨域不会影响这些字体的呈现。

无论如何，希望这会有所帮助，请告诉我们进展如何