在IE CSS字体表面只能在浏览内部链接时起作用

前端之家收集整理的这篇文章主要介绍了在IE CSS字体表面只能在浏览内部链接时起作用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我们的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

猜你在找的CSS相关文章