IE9阻止了跨域Web字体的下载

Question

这真让我抓狂.

只是在IE9上测试一个网站,发现'live'版本正在渲染一个我使用的小字体,而不是开发版本.

以下是一系列屏幕抓取:

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

本地版本和实时版本之间的唯一区别是该字体是从实际站点上的不同域加载的(我已正确设置了跨域策略,如其在Firefox和Chrome上运行的事实所示).

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

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

任何有关这方面的帮助将非常感激 - 谢谢你提前.

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

Answer 1

IE9支持.WOFF; IE8不支持,仅支持.EOT字体.

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

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标头,很明显您的跨域访问配置不正确,因为Access-Control-Allow-Origin您的WOFF文件没有响应标头.他们也提供错误的MIME类型(text/plain),虽然这不会导致您的问题.但是,无法映射woff到正确的MIME类型可能会导致问题,因为某些服务器不会提供具有"未定义"扩展名的文件,而是会返回HTTP/404错误.

Answer 2

好的,这是有效的.将以下部分放在Apache配置中,以便为您提供以下字体的主机:

<FilesMatch "\.(ttf|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "http://mydomain.com"
    </IfModule>
</FilesMatch>

将'mydomain.com'替换为您自己的域名或*(但要小心使用,*因为这意味着任何人都可以使用您的CDN)

'| woff'是我忘记的.卫生署!

Answer 3

对于IIS添加下面的行....就像一个魅力

<system.webServer>
          <httpProtocol>
          <customHeaders>
              <add name="Access-Control-Allow-Origin" value="*" />
              <add name="Access-Control-Allow-Methods" value="GET,PUT,POST,DELETE,OPTIONS" />
              <add name="Access-Control-Allow-Headers" value="Content-Type" />
          </customHeaders>
      </httpProtocol>
  </system.webServer>

Answer 4

关于上面的meanstreakuk的答案,我想补充.我们遇到了同样的问题,我们搜索了Google Web Font的功能.所以,我们放入了我们的htaccess,这个:

标题集Access-Control-Allow-Origin"*"

而不是我们的域名.如果像谷歌那样使用星号,它就会一直有效.