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

Posted 2023-02-27

【中文标题】Firefox 上的可下载字体：URI 错误或不允许跨站点访问

【英文标题】：Downloadable font on firefox: bad URI or cross-site access not allowed

【发布时间】：2013-02-08 01:55:06

【问题描述】：

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

我想使用来自 zurb dot com 的 foundicon，所以我将它们托管在 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）之后，每个图标在一些访问后通常会再次失败。

谁能找到问题所在？

【参考方案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>

【讨论】：

我正在使用 CDN 来提供我的文件，并将此标头添加到源 Web 服务器。 CDN 配置为使用与源相同的标头，当我使用“curl -I”拉文件时，确实“Access-Control-Allow-Origin: *”在两者的标头中。然而……Firefox 仍然不会加载那些字体文件。

CDN 需要支持 Origin: Vary 才能正常工作。不幸的是，CloudFront 没有——如果你正在使用的是（你没有说）。

最初他使用的是 S3，所以只是这些文件的通用存储，我们知道这并不是真正的 CDN - 而且往往更慢。 CloudFront 有解决方法吗？

非常适合我。谢谢

添加到 woff2：<FilesMatch "\.(ttf|otf|eot|woff|woff2)$">

【参考方案2】：

尝试使用已实现的 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

效果很好。

【讨论】：

这是我的代码，如何集成@font-face font-family: 'Roboto'; font-style: normal; font-weight: 100; src: local('Roboto Thin'), local('Roboto-Thin'), url(fonts/roboto/gwVJDERN2Amz39wrSoZ7FxTbgVql8nDJpwnrE27mub0.woff2) format('woff2'); unicode-range: U+1F00-1FFF;

【参考方案3】：

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

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

【讨论】：

太棒了！立即解决了当前本地开发实验中看似非常奇怪的 Webfonts 问题，这与 Chrome、IE 或 Opera 无关。

【参考方案4】：

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

【讨论】：

这是什么兄弟？！

我的意思是 src: url(...) 而不是 src: uri(...)。我拼错了，对不起。