IE9阻止了跨域Web字体的下载 [英] IE9 blocks download of cross-origin web font

问题描述

这让我发疯了。

只是在IE9上测试一个网站并发现实时版本正在渲染一个我使用的网络字体小于开发版。

Just testing a site on IE9 and discovered that the 'live' version is rendering a web font I am using smaller than on the dev version.

以下是一系列屏幕抓取：

Here is a selection of screen grabs:

我正在使用Font Squirrel @ font-face工具包。正如您所看到的，在查看本地版本的网站时，Firefox，Chrome甚至IE9都可以。

I am using the Font Squirrel @font-face kit. As you can see, it is fine on Firefox, Chrome and even IE9 when viewing a local version of the site.

本地和实时版本之间的唯一区别是该字体是从实际站点上的其他域加载的（我已正确设置了跨域策略，如其适用于Firefox和Chrome的事实所示）。

The only difference between the local and live versions is that the font is being loaded from a different domain on the live site (I have set up the cross-domain policy correctly, as illustrated by the fact it works on Firefox and Chrome).

我不记得它在IE8中的样子（微软，再一次，没有想到开发人员，已经在IE8的顶部安装了IE9而无法同时运行它们）

I can't remember what it looked like in IE8 (Microsoft, yet again, haven't thought of developers and have installed IE9 over the top of IE8 with no option to run them simultaneously)

该网站位于 http://enplanner.com ，因此您可以查看来源。

The site is at http://enplanner.com so you can view the source.

我们非常感谢您的任何帮助 - 提前谢谢。

Any help on this would be most appreciated - thank you in advance.

编辑：我已经删除了IE9并发现它在本地和IE8中看起来完全一样。看来IE8有一个优秀的渲染引擎，比IE9更接近FF / Chrome。这是一个令人沮丧的发现。

I have removed IE9 and discovered that is looks exactly the same on both local and live in IE8. It appears IE8 has a superior rendering engine that is closer to FF/Chrome than IE9. This is quite a depressing discovery.

推荐答案

IE9支持.WOFF; IE8没有，并且仅支持.EOT字体。

IE9 supports .WOFF; IE8 does not, and supports only .EOT fonts.

打开IE9 F12开发人员工具，您会看到以下消息：

Open the IE9 F12 Developer Tools and you see the following messages:

CSS3117: @font-face failed cross-origin request. Resource access is restricted. 
Neuton-webfont.woff

CSS3117: @font-face failed cross-origin request. Resource access is restricted. 
YanoneKaffeesatz-Regular-webfont.woff

CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable. 
Neuton-webfont.ttf

CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable. 
YanoneKaffeesatz-Regular-webfont.ttf

检查你的HTTP标题，很明显你的十字架-domain访问配置不正确，因为您的WOFF文件中没有 Access-Control-Allow-Origin 响应标头。它们也以错误的MIME类型（ text / plain ）提供，尽管这不会导致您的问题。但是，未能将 woff 映射到正确的MIME类型可能会导致问题，因为某些服务器将无法提供具有未定义扩展名的文件，而是返回一个 HTTP / 404 错误。

Examining your HTTP headers, it's clear that your cross-domain access is not configured properly, as there is no Access-Control-Allow-Origin response header on your WOFF files. They're also delivered with the wrong MIME type (text/plain) although that's not causing your problem. However, failure to map woff to the correct MIME type can cause problems as some servers will not serve files with "undefined" extensions and will instead return a HTTP/404 error.

这篇关于IE9阻止了跨域Web字体的下载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！