IE 11无法加载资源文件

Question

我有一个应用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的响应与我服务器的响应相同.

启用缓存似乎消除了这种影响(至少,我无法在启用缓存的情况下重现缓存),但是Powers That Be担心这将影响应用程序中的其他不可缓存的资产,因为更多的资产已经过渡到CDN,因此我必须找到根本原因并修复它,而不是在它上面贴上创可贴.

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

Answer 1

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

我希望这个链接有所帮助.

在IE CSS上,font-face仅在浏览内部链接时有效

更新:在.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>

Answer 2

因此，我没有很好的解释为什么会失败，但解决方案是有效的，而不是理想的。您可能会花费大量时间尝试解决此问题，但仍然一事无成，其中涉及大量变量。

您可以设置字体回退来命中您的服务器而不是 CDN 吗？

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

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

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