在IE浏览器CSS字体面只能通过内部链接导航时(On IE CSS font-face works

我们的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浏览器，当我使用内部网页链接浏览页面的字体后只渲染。 如果我打刷新或后退按钮，字体是否被默认字体（宋体）所取代。

目前，该网站使用HTTPS，但使用HTTP时，观察到了同样的问题。

当我浏览使用内部网站链接，在IE开发者工具（按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更多）：显示不正确的后备字体通过返回/刷新航行时。

如何让IE加载上的刷新/后退操作正确的字体？

Answer 1:

我发现了一个解决方案，但我看不出为什么它的工作原理的原因（当然，原因只有一个 - 这是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无法加载字体。 我不知道为什么这个问题只发生在刷新/导航回来，虽然。

编辑-替代解决方案

相反评论最后两行的

  // 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文件的首标包含高速缓存控制的情况下：无缓存值，IE9不字体正确加载。 开发工具显示结果 - 200，但收到列显示400B，在同一时间内容长度为70KB。 我用下面的值的Cache-Control：最大年龄= 0，要解决的问题。

Answer 3:

我有同样的错误，并为那些谁希望有一个纯溶液（非精确的技术相关的）：你需要确保你要发送的字体标头不说， no-cache 。 在什么是以前写的顶部，其实有两个头，可以做到这一点：

"cache-control: no-cache"

和

"pragma: no-cache"

。这都是说的浏览器一样，第一个是HTTP1.1的一部分，第二个是较旧的（HTTP1.0）。

现在，解决方案：

• 如果你真的想成为的字体（和其他文件？）没有客户端缓存，设置"cache-control" to "max-age=0" ; 你可以将编译头，这是过时的（或将其设置为"pragma: cache" ）。
• 如果你确实想拥有缓存：删除no-cache值，并设定适当的最大年龄（如"cache-control: max-age=3600" - 1小时缓存）。 附注可以设置为"pragma: cache"或完全去除。

Answer 4:

我找到了一个替代的解决方案来解决这个问题。

我已经直接嵌入在样式表中的字体，而不是装载作为一个单独的字体文件。 这适用于所有的浏览器包括Windows，Mac，IOS，安卓等精绝，并有助于减少在网页的HTTP请求的数量。

这不会要求在头的Cache-Control的任何变化。

@font-face { font-family: '<FONT NAME>'; src: url(data:application/x-font-woff;charset=utf-8;base64,<BASE64_ENCODED>) format('woff'), url(data:application/x-font-ttf;charset=utf-8;base64,,<BASE64_ENCODED>) format('truetype'); font-weight: normal; font-style: normal; }

您可以使用内置用base64命令在OS X或Linux的字体编码。

Answer 5:

JustAMartin的答案带领我们到一个不同的解决方案：

相反评论最后两行的

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

添加了下面的一行：

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

这应该仍然允许无缓存，后退和前进导航的例外，因为我了解它。 MSDN - SetAllowResponseInBrowserHistory方法

Answer 6:

卸下全球应对NoCache的和NoStore设置将固定的字体，但如果你需要这些设置那么很明显，这不是一个答案。

我的理解是，只有缓存设置为过期将无法持续防止缓存的网页的显示; 它迫使一张支票到服务器，但如果页面没有被修改（304响应）可以（通常是？）还是显示缓存的版本。

（其实阅读本现在它已经发生，我认为设置客户端缓存为立即过期与SetNoServerCaching可能会迫使客户端页面总是更新组合？好像它可能会影响性能虽然）。

我发现，在ASP.NET MVC使用控制器上的OutputCacheAttribute属性禁用缓存不破IE字体。

[OutputCacheAttribute(VaryByParam = "*", Duration = 0, NoStore = true)]
public class FooController : Controller
{
    ...
}    

我知道NoStore是不一样的SetCacheability（HttpCacheability.NoCache），但它似乎达到这个目的。

你可以创建一个具有属性的基本控制器为继承使代码更干净。

Answer 7:

请确保它不是一个路径问题的，也就是你的CSS文件是相对于字体在哪里。 在你的情况，你需要在同一文件夹中的字体文件CSS文件。

Answer 8:

不要设置因人而异请求头到https

没有字体加载

Vary:Accept-Encoding,https

作品

Vary:Accept-Encoding

设置缓存头要避免延迟加载的字体 。

文章来源: On IE CSS font-face works only when navigating through inner links