html - 跨域字体问题

Question

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

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

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

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

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

这是我在笑脸 hack 中使用的字体 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。看这个post在 AWS 论坛上。对很多人来说似乎是个问题。

2012 年 7 月 17 日更新:

作为 AWS 的替代方案，Google 的云服务支持跨源文件服务。我刚刚设置了一个存储桶来提供网络字体，它似乎可以正常工作。查看此博客 post和 documentation了解更多信息。