Question

我是http://www.beperk.com的网站管理员（我给你的网址，以便你能够检查问题）我在CSS中使用@ font-face时遇到了很多问题。

我想使用zurb dot com的foundicons，所以我在亚马逊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

它完美无缺。

Answer 4

我使用网址src: url("../fuentes/EurostileLTStd.otf");代替src: uri("../fuentes/EurostileLTStd.otf");解决了Firefox（本地资源访问问题）中的问题。

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

4 个答案: