跨域字体问题

Question

请在发表评论之前阅读所有内容。

我目前正在开发一个托管在 Amazon Web Services (AWS) 上的大型网站。这使我们能够在网站可能承受较大流量负载的情况下使用可扩展性功能。

最初，我们首先将网站的代码分离为 HTML/PHP/Java 等的混合体，并在单独的服务器上拥有静态资产。当我第一次尝试在此设置中使用 font-face 时，我发现 Firefox 和 IE 无法加载字体，并且很快发现这是一个跨域问题。对此有多种解决方案，其中包括修改标头以允许访问字体文件。然而，我们使用的存储系统不允许这种类型的标头修改。

为了看看我是否能让这些字体在所有浏览器上工作，我将它们以及调用它们的 CSS 文件移动到与网站相同的域。然而，它们似乎仍然无法在 Firefox 或 IE 中加载。如果我复制代码并在文档中本地运行它，那么在所有浏览器中一切似乎都很好（因此文件不会损坏）。 Firefox 确实找到了这些文件，因为我可以看到它们是通过 FireBug 加载的。

我已经检查了所有 URL，以确保它们正确并解析它们应该解析的位置。

这是我在笑脸黑客中使用的字体 CSS：

@font-face {
    font-family : "AllerRegular";
    src : url('aller_rg-webfont.eot');
    src : local('☺'),
          url('aller_rg-webfont.woff') format('woff'), 
          url('aller_rg-webfont.ttf') format('truetype'), 
          url('aller_rg-webfont.svg#webfontooYDBZYS') format('svg');
    font-weight : normal;
    font-style : normal;
}

CSS 文件与字体位于同一目录中。

我还在 .htaccess 文件中设置了 MIME 类型，该文件与字体位于同一文件夹中。

AddType application/vnd.ms-fontobject .eot
AddType font/truetype .ttf
AddType font/opentype .otf
AddType font/opentype .woff
AddType image/svg+xml .svg .svgz
AddEncoding gzip .svgz
<FilesMatch "\.(ttf|otf|eot|woff|svg)$">
        <IfModule mod_headers.c>
                Header set Access-Control-Allow-Origin "*"
        </IfModule>
</FilesMatch>

如果您有任何想法，请提出建议。
我已经在网上搜索了几天，但所有解决方案都让我失败。

Answer 1

目前，从 AWS 提供的网络字体可能无法在 Firefox 和 IE 9+ 中运行，因为 AWS 不支持 Access-Control-Origin-Header。请参阅 AWS 论坛上的此帖子 。似乎是很多人的问题。

2012 年 7 月 17 日更新：

作为 AWS 的替代方案，Google 的云服务支持跨域文件服务。我刚刚设置了一个存储桶来提供网络字体，它似乎正在工作。请参阅此博客帖子和文档了解更多信息。

Answer 2

尝试这样做：

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

Access-Control-Allow-Origin

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

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

我的问题用此方法解决了。

Answer 3

通过添加以下 CORS 配置，可以在没有 Cloudfront 的情况下使用 S3。

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
  <CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Content-*</AllowedHeader>
    <AllowedHeader>Host</AllowedHeader>
  </CORSRule>
</CORSConfiguration>

http://docs.aws.amazon.com/AmazonS3/latest/dev /cors.html

http://html5hacks.com/blog/2012/11/18/configure-amazon-s3-for-cross-origin-resourse-sharing-to-host-a-web-font/

<一个href="http://blog.blenderbox.com/2012/10/12/serving-font-face-fonts-to-firefox-from-an-s3-bucket/" rel="nofollow">http:// blog.blenderbox.com/2012/10/12/serving-font-face-fonts-to-firefox-from-an-s3-bucket/

Answer 4

您可能很需要在新的托管环境上添加对 MIME 类型的支持。

看一下：

http://www.jbarker.com/blog/ 2011/web-fonts-mime-types