IE 11 加载资源文件失败答案

【问题标题】：IE 11 fails to load resource filesIE 11 加载资源文件失败
【发布时间】：2014-11-09 13:31:52
【问题描述】：

我有一个应用程序使用 FontAwesome 的字形字体作为图标，当我从服务器托管文件时一切正常。当我在我的网站上启用 CDN 支持时，IE 11 在字体文件方面表现得相当奇怪。当通过单击链接或手动输入 URL 导航到页面时，字体文件加载正常约 95% 的时间。如果我重新加载页面或使用前进/后退按钮（或大约 5% 的时间正常页面加载不起作用），IE 11 会加载第一个字体文件，以某种方式丢失/丢弃/忽略响应正文的内容，尝试加载第二个文件，丢失响应正文的内容，清洗-冲洗-重复，我最终没有字体字形。所有其他浏览器（包括旧版本的 IE）都可以正常工作。

@font-face CSS 中的声明：

@font-face {
    font-family: 'FontAwesome';
    src: url('/common/fonts/fontawesome-webfont.eot');
    src: url('/common/fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
        url('/common/fonts/fontawesome-webfont.woff') format('woff'),
        url('/common/fonts/fontawesome-webfont.ttf') format('truetype'),
        url('/common/fonts/fontawesome-webfont.svg#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

正常页面加载：

总结：

URL                                     Protocol  Method  Result  Type                      Received  Taken   Initiator   Wait  Start  Request  Response‎‎  Cache read‎‎  Gap‎‎
/common/fonts/fontawesome-webfont.eot   HTTPS     GET     200     application/octet-stream  99.78 KB  109 ms  @font-face  2449  0      47       62        0           1420

响应头：

Key                            Value
Response                       HTTP/1.1 200 OK
Content-Type                   application/octet-stream
Last-Modified                  Mon, 04 Aug 2014 12:49:48 GMT
Accept-Ranges                  bytes
ETag                           "07ef492e2afcf1:0"
Server                         Microsoft-IIS/7.5
P3P                            CP="NON DSP COR ADM DEV PSA IVA CONi TELi OUR BUS NAV"
Access-Control-Allow-Origin    *
Content-Length                 101712
Expires                        Mon, 15 Sep 2014 18:48:40 GMT
Cache-Control                  max-age=0, no-cache, no-store
Pragma                         no-cache
Date                           Mon, 15 Sep 2014 18:48:40 GMT
Connection                     keep-alive

响应正文包含字体文件。

页面重新加载：

总结：

URL                                     Protocol  Method  Result  Type                      Received  Taken  Initiator   Wait  Start  Request  Response‎‎  Cache read‎‎  Gap‎‎
/common/fonts/fontawesome-webfont.eot   HTTPS     GET     200     application/octet-stream  462 B     47 ms  @font-face  983   0      47       0         0           1248
/common/fonts/fontawesome-webfont.woff  HTTPS     GET     200     application/x-font-woff   461 B     63 ms  @font-face  1092  0      63       0         0           1123
/common/fonts/fontawesome-webfont.ttf   HTTPS     GET     200     application/octet-stream  462 B     93 ms  @font-face  1155  15     78       0         0           1030

响应头（对于“fontawesome-webfont.eot”，其他看起来一样，除了内容长度不同，考虑到文件大小的差异）：

Key                            Value
Response                       HTTP/1.1 200 OK
Content-Type                   application/octet-stream
Last-Modified                  Mon, 04 Aug 2014 12:49:48 GMT
Accept-Ranges                  bytes
ETag                           "07ef492e2afcf1:0"
Server                         Microsoft-IIS/7.5
P3P                            CP="NON DSP COR ADM DEV PSA IVA CONi TELi OUR BUS NAV"
Access-Control-Allow-Origin    *
Content-Length                 101712
Expires                        Mon, 15 Sep 2014 19:05:13 GMT
Cache-Control                  max-age=0, no-cache, no-store
Pragma                         no-cache
Date                           Mon, 15 Sep 2014 19:05:13 GMT
Connection                     keep-alive

响应正文为空。请注意，详细信息中的内容长度与摘要中的“已接收”值不匹配。

根据 CDN 日志和 Fiddler2 本地跟踪流量，CDN 正在提供完整的字体文件。据我所知，来自 CDN 的响应与来自我的服务器的响应相同。

启用缓存似乎消除了这种影响（至少，我无法在启用缓存的情况下重现它），但是当权者担心这会影响应用程序中其他不可缓存的资产已过渡到 CDN，因此我必须找到根本原因并修复它，而不是贴上创可贴。

为什么 IE 11 会表现得好像响应具有空响应体？如果文件和响应标头相同，为什么 IE 11 会区别对待来自 CDN 的响应和来自应用服务器的响应？

【问题讨论】：

标签： cdn internet-explorer-11

【解决方案1】：

所以我没有很好的解释为什么会失败，但解决方案是可行的，而不是理想的解决方案。您可能会花费大量时间尝试解决此问题，但仍然无济于事，这涉及大量变量。

您可以将字体回退设置为访问您的服务器而不是 cdn 吗？

您应该能够在 css 中指定您使用一种字体，如果失败则使用另一种字体。

   body { font-family:"FontAwesome", "FontAwesomeFallback"; }

让 FontAwesomeFallback 指向你的本地目录，看看 IE11 是否有同样的问题。如果是 CDN 问题，则访问本地目录应该不是问题，并且字体将正确呈现。如果仍然失败，则可能是字体本身的问题。

【讨论】：

【解决方案2】：

我一直在 CDN 上看到类似的问题。如果我找到任何其他解决方案，我将更新答案。如果您的字体文件没有设置缓存，IE 就会出现问题。

希望此链接对您有所帮助。

On IE CSS font-face works only when navigating through inner links

更新：在 .htaccess 文件中设置正确的缓存控制后为我解决了这个问题

我为 max-age= 3600 制作了我的，但 max-age=0 也可以使用

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

【讨论】：

【解决方案3】：

MIME 类型在 IE11 中非常重要。您必须确保为字体文件发送正确的 MIME 类型：

application/vnd.ms-fontobject 用于 EOT 字体
application/font-woff 用于 WOFF 字体

您使用的是什么 CDN？使用官方 FontAwesome CDN (http://www.bootstrapcdn.com/#fontawesome_tab)，一切正常。

【讨论】：

【解决方案4】：

对于其他遇到相同问题的人，以下是信息，不一定是解决方案。

IE 显然有一个 bug，标题为：

@font-face 不适用于 Internet Explorer 和 HTTP-Header Pragma=no-cache

他们以Won't Fix的形式关闭了该错误。

在此处查看详细信息： http://connect.microsoft.com/IE/feedbackdetail/view/992569/font-face-not-working-with-internet-explorer-and-http-header-pragma-no-cache

在添加一些标头以防止缓存后，我立即注意到了同样的问题，包括 pragma 标头。

【讨论】：