38

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

任何人都可以找到问题吗？

4

4 回答 4

50

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

Access-Control-Allow-Origin

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

<FilesMatch "\.(ttf|otf|eot|woff|woff2)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>
于 2013-02-22T13:47:31.960 回答
14

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

请参阅：https ://developer.mozilla.org/en-US/docs/Same-origin_policy_for_file:_URIs

于 2016-11-14T09:48:19.443 回答
6

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

它工作得很好。

于 2014-06-10T09:25:21.173 回答
-2

我使用 url:src: url("../fuentes/EurostileLTStd.otf");而不是src: uri("../fuentes/EurostileLTStd.otf");.

于 2017-03-19T22:01:19.473 回答