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

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.

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

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

我想使用zurb。com的foundicons，所以我在Amazon S3托管它们。

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

我设置了bucket以允许在这里指定的跨域访问:http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html#how-do- I - enablecors

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:

一切都开始在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

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.

我说的是随机的，因为在完全重载页面之后(使用control/command + R)，每个图标在某些访问之后通常都会再次失败。

Can anyone find the problem?

谁能找出问题所在吗?

4 个解决方案

#1

On your server you will need to add:

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

Access-Control-Allow-Origin

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

到字体文件的头部，例如，如果你使用Apache，你可以将它添加到。htaccess:

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

#2

If anyone are using local resource and facing this problem in firefox. You can go to about:config and change the security.fileuri.strict_origin_policy preference to false.

如果有人使用本地资源并在firefox中面对这个问题。可以转到about:config并更改security.fileuri。strict_origin_policy偏好为false。

see : https://developer.mozilla.org/en-US/docs/Same-origin_policy_for_file:_URIs

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

#3

try to use implemented base64-encoded fonts like:

尝试使用实现的base64编码字体，比如:

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

see: http://sosweetcreative.com/2613/font-face-and-base64-data-uri

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

it worked perfectly.

做得很成功。

#4

-3

I resolved the problem in Firefox (local resource access problem) using uri: src: uri("../fuentes/EurostileLTStd.otf"); instead of src: uri("../fuentes/EurostileLTStd.otf");.

我使用uri: src: uri(“../fuentes/ eurostileltd .otf”)解决了Firefox中的问题(本地资源访问问题);而不是src:uri(" . . / f / EurostileLTStd.otf ");。

#1