在IE CSS上，仅当通过内部链接导航时，字体才有效

小编典典

在IE CSS上，仅当通过内部链接导航时，字体才有效

css

我们的网页设计人员创建了一个具有以下字体的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）：在浏览“后退/刷新”时显示不正确的后备字体。

如何使IE在刷新/返回操作上加载正确的字体？

阅读 331

2020-05-16

共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);

2020-05-16