IE9 阻止下载跨域网络字体 [英] 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.

这里是一些屏幕截图:

我正在使用 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 有一个更接近 FF/Chrome 的高级渲染引擎，而不是 IE9.这是一个非常令人沮丧的发现.

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 标头，很明显您的跨域访问配置不正确，因为您的 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 阻止下载跨域网络字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！