我们的webdesigner已经创建了一个带有以下字体的CSS:
@font-face { font-family: 'oxygenregular'; src: url('oxygen-regular-webfont.eot'); src: url('oxygen-regular-webfont.eot?#iefix') format('embedded-opentype'),url('oxygen-regular-webfont.woff') format('woff'),url('oxygen-regular-webfont.ttf') format('truetype'),url('oxygen-regular-webfont.svg#oxygenregular') format('svg'); font-weight: normal; font-style: normal; }
它在IE和Firefix上工作正常。但是有一个问题:在IE上,只有当我使用内部网页链接浏览页面时,字体才能正确呈现。如果我点击刷新或返回按钮,字体将被替换为默认字体(Times New Roman)。
目前该网站正在使用HTTPS,但在使用HTTP时也观察到相同的问题。
当我使用内部网站链接导航时,在IE Developer工具(Shift – F12)的“网络”选项卡中,我看到以下内容:
/Content/oxygen-regular-webfont.eot? GET 200 application/vnd.ms-fontobject
当我使用刷新/返回按钮时,还有两个其他字体的条目:
/Content/oxygen-regular-webfont.woff GET 200 application/x-font-woff /Content/oxygen-regular-webfont.ttf GET 200 application/octet-stream
CSS文件本身正在以下列方式加载:
/Content/site.css GET 200 text/css
我试图删除woff和ttf,所以我有以下:
@font-face { font-family: 'oxygenregular'; src: url('oxygen-regular-webfont.eot'); src: url('oxygen-regular-webfont.eot?#iefix') format('embedded-opentype'); font-weight: normal; font-style: normal; }
但仍然IE的行为方式相同(除了它不再下载woff和ttf):在浏览Back / Refresh时显示不正确的后备字体。
如何使IE在刷新/返回操作上加载正确的字体?
解决方法
我找到一个解决方案,但我看不到它的作用原因(嗯,只有一个原因 – 这是IE:D)。
我所做的是将同一个站点放在Apache上,再次测试。在Apache上,即使使用刷新按钮,字体也能正常工作。然后在网络检查员中,我看到Apache正在返回304而不是200的eot文件,它打我 – 所以它是缓存问题。我去了我的ASP.NET应用程序,足够确定 – 出于安全原因(也避免缓存AJAX请求)有人已禁用您可以想象的每个缓存:
// prevent caching for security reasons HttpContext.Current.Response.Cache.SetAllowResponseInBrowserHistory(false); HttpContext.Current.Response.Cache.SetExpires(DateTime.UtcNow.AddDays(-1)); HttpContext.Current.Response.Cache.SetValidUntilExpires(false); HttpContext.Current.Response.Cache.SetRevalidation(HttpCacheRevalidation.AllCaches); HttpContext.Current.Response.Cache.SetNoServerCaching(); // do not use any of the following two - they break CSS fonts on IE HttpContext.Current.Response.Cache.SetCacheability(HttpCacheability.NoCache); HttpContext.Current.Response.Cache.SetNoStore();
一旦我注释掉了最后两行代码,突然字体在IE上开始工作,没有问题。所以我猜的答案是:IE不能加载字体,如果它没有缓存。我不知道为什么问题只在刷新/导航时才会发生。
编辑 – 替代解决方案
而不是评论那些最后两行
06001
将SetAllowResponseInBrowserHistory更改为true:
HttpContext.Current.Response.Cache.SetAllowResponseInBrowserHistory(true);
这应该仍然允许没有缓存,除了我理解的后退和远程导航。
MSDN – SetAllowResponseInBrowserHistory Method