IE 11无法加载资源文件

时间:2014-09-15 22:36:43

标签: cdn internet-explorer-11

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

CSS中的

@font-face声明:

@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的响应与我服务器的响应相同。

启用缓存似乎消除了这种影响(至少,我无法通过启用缓存来重现它),但是Powers That Be担心这会影响应用程序中的其他不可缓存的资产。转移到CDN,因此我必须找到根本原因并修复它,而不是在它上面贴上创可贴。

为什么IE 11的行为就好像响应有空响应体?如果文件和响应头是相同的,为什么IE 11可以处理来自CDN的响应与应用服务器的响应不同?

4 个答案:

答案 0 :(得分:8)

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

我希望此链接有所帮助。

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

更新:在.htaccess文件

中设置正确的缓存控制后,我遇到了问题

我的最大年龄= 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>

答案 1 :(得分:1)

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

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

你使用什么CDN?使用官方的FontAwesome CDN(http://www.bootstrapcdn.com/#fontawesome_tab),一切都应该可以正常工作。

答案 2 :(得分:1)

对于其他发现同样问题的人,以下是信息,不一定是解决方案。

IE显然有一个标题为:

的错误
  

@ font-face无法使用Internet Explorer和HTTP-Header   附注=无缓存

他们已将无法修复的错误关闭。

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

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

答案 3 :(得分:0)

所以我没有一个很好的解释,为什么这是失败的,但解决方案是有效的,而不是理想的解决方案。您可以花费大量时间尝试对此进行故障排除,但仍然无法进行任何操作,涉及到大量变量。

你可以设置字体后备来命中服务器而不是cdn吗?

你应该可以在css中指定它使用一个字体,如果它失败则指定另一个。

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

使FontAwesomeFallback指向您的本地目录,看看IE11是否有同样的问题。如果这是一个CDN问题,那么点击本地目录应该不是问题,字体将正确呈现。如果它仍然失败,则可能是字体本身的问题。