CSS firefox 上的可下载字体：错误的 URI 或不允许跨站点访问
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15024333/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Downloadable font on firefox: bad URI or cross-site access not allowed
提问by dolarsrg
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 dot 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
我设置了存储桶以允许此处指定的跨域访问：http: //docs.aws.amazon.com/AmazonS3/latest/dev/cors.html#how-do-i-enable-cors
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.
我随机说，因为在完全重新加载页面（使用控制/命令 + R）之后，每个图标在一些访问后通常会再次失败。
Can anyone find the problem?
任何人都可以找到问题吗？
回答by Ryan McDonough
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>
回答by thanh
If anyone are using local resource and facing this problem in firefox. You can go to about:configand change the security.fileuri.strict_origin_policypreference 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
回答by matt hias
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.
它工作得很好。
回答by Carlos Martínez
I resolved the problem in Firefox (local resource access problem) using url: src: url("../fuentes/EurostileLTStd.otf");instead of src: uri("../fuentes/EurostileLTStd.otf");.
我使用 url:src: url("../fuentes/EurostileLTStd.otf");而不是src: uri("../fuentes/EurostileLTStd.otf");.
