IE9阻止跨源Web字体下载

Question

这真让我抓狂。刚刚在IE9上测试了一个网站，发现“实时”版本正在渲染我使用的Web字体，而小于开发版本。以下是一些屏幕抓取：在此处输入图片说明我正在使用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-OriginWOFF文件上没有响应标头。它们也以错误的MIME类型（text/plain）交付，尽管这不会引起您的问题。但是，无法映射woff到正确的MIME类型可能会导致问题，因为某些服务器将不提供具有“未定义”扩展名的文件，而是返回HTTP/404错误。

Answer 2

对于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>