logo标签列表

IE 11无法加载资源文件

cdninternet-explorer-11
5
我有一个应用程序，其中使用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;
}

Normal page load（正常页面加载）：
概要：
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”，其他看起来相同，除了content-length的差异，这解释了文件大小的差异）：

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

启用缓存似乎可以消除这种影响(至少我没有能够使用启用缓存重现它)，但领导们担心这会影响应用程序中的其他无法缓存的资源，因此我必须找到根本原因并加以修复，而不是简单地敷个创可贴。

为什么IE11会将响应体视为空？为什么IE11会将来自CDN的响应与来自应用程序服务器的响应区别对待，如果文件和响应头相同的话？

4个回答
8

我发现CDN也有类似问题。如果找到其他解决方案，我会更新这个答案。IE浏览器的问题在于你的字体文件没有设置缓存。

希望这个链接能帮到你：

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

更新：在.htaccess文件中设置正确的缓存控制后，我的问题得以解决。我把我的最大年龄设置为3600，但最大年龄为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

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

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

您使用的是哪个CDN？使用官方FontAwesome CDN（http://www.bootstrapcdn.com/#fontawesome_tab），一切都应该正常工作。

1

如果有其他人遇到同样的问题，以下是信息，不一定是解决方案。

IE显然存在一个名为：

@font-face not working with Internet Explorer and HTTP-Header Pragma=no-cache

他们已经将该错误关闭为无法修复。

详细信息请参见： http://connect.microsoft.com/IE/feedbackdetail/view/992569/font-face-not-working-with-internet-explorer-and-http-header-pragma-no-cache

我在添加一些标头以防止缓存（包括Pragma标头）后立即注意到了相同的问题。

0

所以我对为什么这个失败没有一个好的解释，但是那个能够工作的解决方案，而不是那个理想的方案。你可以花费大量时间来尝试解决问题，但仍然无法获得任何结果，因为涉及到大量变量。

您能否将字体回退设置为命中您的服务器而不是cdn？

您应该能够在使用一种字体时指定它在失败时使用另一种字体。

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

将FontAwesomeFallback指向您的本地目录，查看IE11是否存在相同的问题。如果是CDN问题，则访问本地目录不应该成为问题，字体将正确呈现。如果仍然失败，则可能是字体本身的问题。

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