firefox上的可下载字体:不允许使用错误的URI或跨站点访问

Question

我是http://www.beperk.com的网站管理员(我给你的URL,所以你可以检查问题)我在CSS中使用@ font-face时遇到很多问题.

我想使用zurb dot com的foundicons,所以我在Amazon S3上托管它们.

我将桶设置为允许跨域访问,如下所示:http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html#how-do-i-enable-cors

一切都开始在webkit,trident和gecko上无缝地工作......主要是:当使用firefox浏览网页时(测试版本为17,18和19),所有图标随机失败并出现此错误:

Timestamp: 22/02/13 13:18:01
Error: downloadable font: download failed (font-family: "GeneralFoundicons" style:normal weight:normal stretch:normal src index:1): bad URI or cross-site access not allowed

我随机说,因为在完全重新加载页面后(使用control/command + R),每次访问后,每个图标通常会再次失败.

谁能找到问题呢？

Answer 1

在您的服务器上,您需要添加:

Access-Control-Allow-Origin

对于字体文件的标题,例如,如果您使用的是Apache,则可以将其添加到.htaccess:

<FilesMatch "\.(ttf|otf|eot|woff|woff2)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

Answer 2

如果有人使用本地资源并在Firefox中遇到此问题.您可以转到about:config并将security.fileuri.strict_origin_policy首选项更改为false.

请参阅:https://developer.mozilla.org/en-US/docs/Same-origin_policy_for_file:_URIs

Answer 3

尝试使用已实现的base64编码字体,如:

@font-face {
 font-family:"font-name";
 src:url(data:font/opentype;base64,[paste-64-code-here]);
 font-style:normal;
 font-weight:400;
}

请参阅:http://sosweetcreative.com/2613/font-face-and-base64-data-uri

它工作得很好.