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论坛上的post。对许多人来说似乎是一个问题。

2012年7月17日更新：

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

Answer 2

通过添加以下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/

http://blog.blenderbox.com/2012/10/12/serving-font-face-fonts-to-firefox-from-an-s3-bucket/

Answer 3

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

看看：

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

Answer 4

尝试这样做：

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

Access-Control-Allow-Origin

到字体文件的标题，例如，如果你使用Apache，你可以将它添加到.htaccess：

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

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

跨域字体问题

4 个答案: