跨域字体问题

Question

请在评论之前阅读所有这些内容.

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

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

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

我检查了所有网址,以确保它们是正确的,并解决它们应该在哪里.

这是我在笑脸黑客中使用的font-face 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中提供的webfonts可能无法在Firefox和IE 9+中运行,因为AWS不支持Access-Control-Origin-Header.在AWS论坛上查看此帖子.对许多人来说似乎是一个问题.

更新7/17/12:

作为AWS的替代方案,Google的云服务支持跨源文件服务.我只是设置了一个服务于webfonts的存储桶,它似乎正在工作.有关详细信息,请参阅此博客文章和文档.

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>

我的问题用这种方法解决了。