Firefox 上的可下载字体:错误的 URI 或不允许跨站点访问 [英] Downloadable font on firefox: bad URI or cross-site access not allowed

问题描述

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

I'm a webmaster at http://www.beperk.com (I'm giving you the URL so you are able to check the problem) and I'm having lots of problems using @font-face in CSS.

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

I want to use the foundicons from zurb dot com so I hosted them at Amazon S3.

我按照此处的规定设置了存储桶以允许跨域访问:http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html#how-do-i-enable-cors

I set up the bucket to allow crossdomain access as specified here: http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html#how-do-i-enable-cors

一切都开始在 webkit、trident 和 Gecko 上无缝运行...主要是:使用 firefox 浏览网页时(已测试 17、18 和 19 版)所有图标都随机失败并出现此错误:

And everything started to work seamless at webkit, trident and gecko... mostly: when browsing the web with firefox (version 17, 18 and 19 tested) all the icons fails randomly with this error:

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)之后，每个图标在一些访问后通常会再次失败.

And I say randomly since after a full reload of the page (with control/command + R) every single icon appears normally to fail again after some visits.

谁能找到问题所在?

推荐答案

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

On your server you will need to add:

Access-Control-Allow-Origin

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

To the header of the font files, so for example if you are using Apache you can add this to the .htaccess:

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

这篇关于Firefox 上的可下载字体:错误的 URI 或不允许跨站点访问的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！