跨域字体问题 [英] Cross-domain font-face issues
问题描述
请先阅读所有内容，然后再发表评论。
please read all of this before commenting.
我目前正在一个大型网站上工作，该网站托管在Amazon Web Services（AWS）上。这样一来，我们就可以在网站可能承担大量流量的情况下使用可伸缩性功能。
I'm currently working on a large website which is hosted on Amazon Web Services (AWS). This allows us to use scalability features in situations where the website might take a big traffic load.
最初，我们首先将HTML / PHP / Java等，并且在单独的服务器上具有静态资产。当我第一次尝试在此设置中使用font-face时，我发现Firefox和IE无法加载字体，并很快发现这是一个跨域问题。有多种解决方案，其中包括修改标题以允许访问字体文件。但是，我们使用的存储系统不允许这种类型的标题修改。
Originally we started by separating out the code of the website a mix of HTML/PHP/Java etc and have static assets on a separate server. When I first tried using font-face in this setup I found that Firefox and IE would not load the font, and quickly discovered it was a cross-domain issue. There are a variety of solutions to this, which include modifying headers to allow access to the font files. However, the storage system we're using doesn't allow for this type of header modification.
为了看看我是否可以使字体在所有版本之间都能正常工作所有的浏览器我都将它们和CSS文件移到了与网站相同的域中。但是，它们似乎仍无法在Firefox或IE中加载。如果我复制代码并在我的文档中本地运行它，则在所有浏览器中一切正常（因此文件不会损坏）。 Firefox肯定是在查找文件，因为我可以看到它们是通过FireBug加载的。
In a bid to see if I could just get the fonts to work across all browsers I moved them and the CSS file that calls them to the same domain as the website. However they still don't seem to load up in Firefox or IE. If I copy the code and run it locally in my documents everything seems fine in all browsers (so the files cannot be corrupt). Firefox is definitely finding the files as I can see them being loaded via FireBug.
我检查了所有URL，以确保它们正确无误并确定应该在哪里。
I've checked all URLs to make sure they're correct and resolve where they should.
这是我与笑脸黑客一起使用的字体CSS：
Here's the font-face CSS I'm using with the smiley hack:
@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文件与字体位于同一目录。
The CSS file sits in the same directory as the fonts.
我还在.htaccess文件中设置了MIME类型，该文件与字体位于同一文件夹中。
I also have the MIME types set in a .htaccess file which sits in the same folder as the fonts.
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>
如果您有任何想法请提出建议。
我一直在网上搜索一些
If you have any ideas please suggest.
I've been searching the web for a few days now but all solutions have failed me.
推荐答案
当前，从AWS提供Webfonts可能无法在Firefox和IE 9中运行。 +，因为AWS不支持Access-Control-Origin-Header。在AWS论坛上查看此帖子 。对于许多人来说似乎是个问题。
Currently, serving webfonts from AWS likely won't work in Firefox and IE 9+ because AWS doesn't support the Access-Control-Origin-Header. See this post on the AWS forums. Seems to be a problem for a lot of people.
更新12年7月17日：
Update 7/17/12:
除了AWS之外，Google的云服务还支持跨域文件服务。我只是设置了一个桶来提供webfonts，它似乎正在工作。请参阅此博客帖子和文档以获取更多信息。
As an alternative to AWS, Google's cloud services support cross-origin file serving. I just set up a bucket to serve webfonts, and it seems to be working. See this blog post and the documentation for more info.
这篇关于跨域字体问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
