IE9阻止跨域Web字体下载

67

这真让我抓狂。

我正在测试一个网站,在IE9上发现“线上”版本使用的Web字体比开发版本要小。

下面是一些屏幕截图:

enter image description here

我使用的是Font Squirrel @font-face kit。正如您所看到的,在Firefox、Chrome甚至是在查看本地版本的IE9中都可以正常显示。

本地和线上版本之间唯一的区别是字体从不同的域加载(我已经正确设置了跨域策略,正如在Firefox和Chrome上运行时所示)。

我记不得它在IE8中的样子了(微软又一次没有为开发人员考虑,将IE9覆盖了IE8,并没有同时运行它们的选项)。

该网站位于http://enplanner.com,您可以查看源代码。

非常感谢您提供任何帮助 - 预先感谢您。

编辑:我已删除IE9并发现在IE8中本地和线上的显示效果是完全相同的。看来IE8有更高级的渲染引擎,接近FF/Chrome,这是一个令人沮丧的发现。


IE9版本与实际版本显示的字体不同。如果您查看字母“l”的衬线,您会发现它们是不同的。 为什么IE9不能加载与IE8相同的字体,我无法说。 - Gareth
13个回答

62

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头信息来看,很明显你的跨域访问没有正确配置,因为在你的WOFF文件中没有Access-Control-Allow-Origin响应头。虽然这并不是导致你问题的原因,但它们也被错误地以text/plain的MIME类型传递。然而,未将woff映射到正确的MIME类型可能会引起问题,因为一些服务器不会提供具有“未定义”扩展名的文件,并且会返回HTTP/404错误。


那么IE9实际上加载了哪些文件来呈现它们呢?它确实显示了Web字体,只是似乎以不同于FF / Chrome / IE8的大小呈现它们。顺便说一句,感谢平台预览提示 - 我忘记我安装了那个... - user159895
1
啊哈!我在我的Apache配置文件的FilesMatch行中漏掉了“woff”。我会将完整的代码块发布为答案,以便其他遇到此问题的人知道该怎么做。 - user159895
2
另外,我今天刚刚发现了 Fiddler(试图调试这个问题!),这是一款非常棒的软件,所以谢谢你提供它! - user159895
如果IIS未配置发送.woff文件的MIME类型,则会出现此错误。在IIS中添加.woff文件的映射可以解决我的特定问题。假设运行“ IIS建议的设置”更新可能会解决此问题???https://dev59.com/zm445IYBdhLWcg3w0NSu - Alex
这刚好解决了我的问题,我遇到了一个 .woff 字体文件 404 错误。设置 MIME 类型后它又回来了! - xan

35

好的,以下是有效的内容。将以下部分放入您正在从中提供字体的主机的Apache配置中:

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

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

|woff是我忘记的。唉!


我已经尝试了使用ttf字体,但是没有成功,在我的域名和通配符下都无法工作。我有可用的模块头部,甚至正确配置了MIME类型,但是什么都不起作用。 - Harry
是的,有一天苹果说Flash不再酷了。另一天每个人都同意了。现在人们因为所有的小问题而遭受痛苦,处理不同版本的IE。话说得够多了,这真的是世界末日:P - kroe
请注意,如果您使用像Cloudflare这样的CDN,则需要清除缓存,以便在服务器上进行的更改得以传播。 - wal5hy

8

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

9
这个想法真的不太好:方法列表只需要允许GET请求,以便提供字体 - 允许所有东西(PUT,POST,DELETE,OPTIONS)到任何地方(*)将门敞开得太大。 - Ben Hull
这里只提到了IIS,其他地方都是Apache。 - Amit Singh
现在这行代码应该是<add name="Access-Control-Allow-Methods" value="GET,OPTIONS" />还是<add name="Access-Control-Allow-Methods" value="GET" />?此外,您是否需要指定文件类型而不是使用*值? - Jay
你能否更新这个答案,仅针对特定的文件? - MaylorTaylor

8
关于meanstreakuk的答案,我想补充一下。我们遇到了同样的问题,然后我们查找了Google Web Font的解决方法。所以我们在.htaccess文件中加入了以下内容:
Header set Access-Control-Allow-Origin "*"
而不是我们的域名。如果像Google那样使用星号,则始终有效。

3

检查是否能在IE浏览器中打开文件 (your-web.example/your-font.woff),如果收到404错误,请进入IIS,在左侧面板选择IIS根节点,双击"MIME类型"配置选项,在右侧的操作面板上单击"添加..."链接。这将带出以下对话框。添加.woff文件扩展名,并将application/x-font-woff指定为相应的MIME类型。

我在此网站(Robòtica educativa)中使用这些说明,我将我的原始.ttf字体转换为(http://www.font2web.com/)


3
一种替代使用Access-Control-Allow-Origin头的解决方案是使用data:在CSS中嵌入字体。

你可以使用Font Squirrel的Web字体生成器将字体嵌入CSS中。点击“专家”模式,向下滚动到“CSS”行并选择“Base64编码”。 - konyak

3

我找到了一个解决方法。将以下内容添加到htaccess文件中。

BrowserMatch MSIE best-standards-support
Header set X-UA-Compatible IE=8 env=best-standards-support

1

不要忘记包含 .svg -- 在某些情况下这是必要的。在 IE 11 中添加它可以解决问题。

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

1

0

要在ASP.Net中实现,您可以使用以下语法

Response.AppendHeader("Access-Control-Allow-Origin", "*");

1
如何准确地实现这个? - Mike Kormendy

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接