在IE CSS上,font-face仅在浏览内部链接时有效

Question

我们的webdesigner创建了一个带有以下font-face的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在刷新/返回操作上加载正确的字体？

Answer 1

我找到了一个解决方案,但我看不出它的工作原因(嗯,只有一个原因 - 它是IE:D).

我所做的是将相同的站点放在Apache上并再次测试.在Apache上,即使使用"刷新"按钮,字体也能正常工作.然后在网络检查员中,我看到Apache正在为eot文件返回304而不是200,它击中了我 - 所以这是缓存问题.我去了我的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无法加载字体.我不知道为什么只有在刷新/导航时才会出现问题.

编辑 - 替代解决方案

而不是评论最后两行

    // 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();

更改SetAllowResponseInBrowserHistory到true代替:

HttpContext.Current.Response.Cache.SetAllowResponseInBrowserHistory(true);

根据我的理解,除了后退和前进导航之外,这应该仍然允许无缓存. MSDN - SetAllowResponseInBrowserHistory方法

Answer 2

我遇到了同样的问题.

如果.eot文件的头包含Cache-Control:no-cache值,IE9不会正确加载字体.开发工具显示结果 - 200,但列Received显示400B,同时Content-Length为70Kb.我使用了以下值Cache-Control:max-age = 0来解决问题.

Answer 3

我只是有同样的错误,对于那些想要一个纯解决方案(非精确技术相关)的人:你需要确保你发送的字体标题不说no-cache.除了以前写的内容之外,实际上有两个标题可以做到:

"cache-control: no-cache"

和

"pragma: no-cache"

两者都说浏览器相同,第一个是HTTP1.1的一部分,第二个是旧的(HTTP1.0).

现在,解决方案:

• 如果你真的想在没有客户端缓存的情况下提供字体(和其他文件？),请设置"cache-control" to "max-age=0"; 你可以删除pragma标题,它已经过时(或设置为"pragma: cache").
• 如果您确实想要缓存:删除no-cache值,并设置适当的max-age(例如"cache-control: max-age=3600"- 一小时缓存).Pragma可以设置为"pragma: cache"或完全删除.