我有一个应用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的响应与应用服务器的响应不同?
答案 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 附注=无缓存
他们已将无法修复的错误关闭。
在添加几个标头以防止缓存后,我立即注意到了同样的问题,包括pragma标头。
答案 3 :(得分:0)
所以我没有一个很好的解释,为什么这是失败的,但解决方案是有效的,而不是理想的解决方案。您可以花费大量时间尝试对此进行故障排除,但仍然无法进行任何操作,涉及到大量变量。
你可以设置字体后备来命中服务器而不是cdn吗?
你应该可以在css中指定它使用一个字体,如果它失败则指定另一个。
body { font-family:"FontAwesome", "FontAwesomeFallback"; }
使FontAwesomeFallback指向您的本地目录,看看IE11是否有同样的问题。如果这是一个CDN问题,那么点击本地目录应该不是问题,字体将正确呈现。如果它仍然失败,则可能是字体本身的问题。