Html 跨域字体问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8245464/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Cross-domain font-face issues
提问by diggersworld
please read all of this before commenting.
请在评论前阅读所有这些内容。
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.
我目前正在处理一个托管在 Amazon Web Services (AWS) 上的大型网站。这使我们能够在网站可能承受大量流量负载的情况下使用可扩展性功能。
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.
最初，我们首先将网站的代码与 HTML/PHP/Java 等混合在一起，并在单独的服务器上拥有静态资产。当我第一次尝试在这个设置中使用 font-face 时，我发现 Firefox 和 IE 不会加载字体，并很快发现这是一个跨域问题。对此有多种解决方案，包括修改标题以允许访问字体文件。但是，我们使用的存储系统不允许这种类型的标头修改。
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.
为了看看我是否可以让字体在所有浏览器上工作，我移动了它们以及将它们调用到与网站相同的域的 CSS 文件。然而，它们似乎仍然无法在 Firefox 或 IE 中加载。如果我复制代码并在我的文档中本地运行它，那么在所有浏览器中一切似乎都很好（因此文件不会损坏）。Firefox 肯定会找到这些文件，因为我可以看到它们是通过 FireBug 加载的。
I've checked all URLs to make sure they're correct and resolve where they should.
我已经检查了所有 URL 以确保它们是正确的并解决了它们应该在哪里。
Here's the font-face CSS I'm using with the smiley hack:
这是我在 Smiley hack 中使用的 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;
}
The CSS file sits in the same directory as the fonts.
CSS 文件与字体位于同一目录中。
I also have the MIME types set in a .htaccess file which sits in the same folder as the fonts.
我还在 .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>
If you have any ideas please suggest.
I've been searching the web for a few days now but all solutions have failed me.
如果您有任何想法，请提出建议。
我已经在网上搜索了几天，但所有解决方案都失败了。
采纳答案by Casey
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 poston the AWS forums. Seems to be a problem for a lot of people.
目前，从 AWS 提供 webfonts 可能无法在 Firefox 和 IE 9+ 中工作，因为 AWS 不支持 Access-Control-Origin-Header。请参阅AWS 论坛上的这篇文章。似乎是很多人的问题。
Update 7/17/12:
2012 年 7 月 17 日更新：
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 postand the documentationfor more info.
作为 AWS 的替代方案，谷歌的云服务支持跨域文件服务。我刚刚设置了一个存储桶来提供 webfonts，它似乎正在工作。有关更多信息，请参阅此博客文章和文档。
回答by Parasolx
Try do this:
尝试这样做：
On your server you will need to add:
在您的服务器上，您需要添加：
Access-Control-Allow-Origin
To the header of the font files, so for example if you are using Apache you can add this to the .htaccess:
对于字体文件的标题，例如，如果您使用的是 Apache，则可以将其添加到 .htaccess 中：
<FilesMatch "\.(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
My problem solved with this method.
我的问题用这种方法解决了。
回答by Tom
This is possible using S3 without Cloudfront by adding the following CORS configuration.
通过添加以下 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://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html
http://blog.blenderbox.com/2012/10/12/serving-font-face-fonts-to-firefox-from-an-s3-bucket/
http://blog.blenderbox.com/2012/10/12/serving-font-face-fonts-to-firefox-from-an-s3-bucket/
回答by joshcomley
You may well need to add support for the MIME types on the new hosting environment.
您可能需要在新的托管环境中添加对 MIME 类型的支持。
Take a look at:
看一眼：
