Question

我有一个应用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

响应标题（对于＆＃34; fontawesome-webfont.eot＆＃34;，其他看起来相同，除了内容长度的差异，考虑到文件大小的差异）：

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

响应正文是空的。请注意，细节中的内容长度与＆＃34;收到的＆＃34;不匹配。摘要中的值。

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

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

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

Answer 1

我一直在看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>

Answer 2

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

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

你使用什么CDN？使用官方的FontAwesome CDN（http://www.bootstrapcdn.com/#fontawesome_tab），一切都应该可以正常工作。

Answer 3

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

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标头。

Answer 4

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

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

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

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

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

IE 11无法加载资源文件

4 个答案: