html – 跨域字体问题

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

我目前正在一个由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>

如果您有任何想法,请提出建议.我一直在搜索网站几天,但所有的解决方案都让我失望.

解决方法

目前来说,由于AWS不支持Access-Control-Origin-Header,因此在AWS和IE 9中提供的WebFonts可能不起作用.在AWS论坛上看到这个 post.似乎是很多人的问题.

更新7/17/12：

作为AWS的替代方案,Google的云服务支持跨原始文件服务.我只是设置一个桶来提供web字体,似乎是正常工作.有关更多信息,请参阅此博客post和documentation.

html – 跨域字体问题

解决方法

相关文章