在 IE CSS font-face 仅在通过内部链接导航时才有效 [英] On IE CSS font-face works only when navigating through inner links

问题描述

我们的网页设计师创建了一个具有以下字体的 CSS:

@font-face {font-family: 'oxygenregular';src: url('oxygen-regular-webfont.eot');src: url('oxygen-regular-webfont.eot?#iefix') 格式('embedded-opentype'),url('oxygen-regular-webfont.woff') 格式('woff'),url('oxygen-regular-webfont.ttf') 格式('truetype'),url('oxygen-regular-webfont.svg#oxygenregular') 格式('svg');字体粗细:正常；字体样式:正常；}

它在 IE 和 Firefix 上运行良好.但是有一个问题:在 IE 上，只有当我使用内部网页链接导航页面时，字体才能正确呈现.如果我点击刷新"或返回"按钮，字体将被默认字体 (Times New Roman) 替换.

目前该网站使用的是 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') 格式('embedded-opentype');字体粗细:正常；字体样式:正常；}

但 IE 的行为方式仍然相同(除了不再下载 woff 和 ttf):在浏览后退/刷新时显示不正确的后备字体.

如何让 IE 在刷新/返回操作时加载正确的字体?

解决方案

我找到了一个解决方案，但我看不到它起作用的原因(好吧，只有一个原因 - IE :D).

我所做的是将同一站点放在 Apache 上并再次测试.在 Apache 上，即使使用刷新按钮，字体也能正常工作.然后在网络检查器中，我看到 Apache 为 eot 文件返回 304 而不是 200，它击中了我 - 所以它是缓存问题.我去了我的 ASP.NET 应用程序，果然 - 出于安全原因(也是为了避免缓存 AJAX 请求)，有人禁用了您可以想象的所有缓存:

//出于安全原因阻止缓存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();//不要使用以下两个中的任何一个 - 它们会破坏 IE 上的 CSS 字体HttpContext.Current.Response.Cache.SetCacheability(HttpCacheability.NoCache);HttpContext.Current.Response.Cache.SetNoStore();

当我注释掉最后两行代码时，突然字体开始在 IE 上正常工作.所以我猜答案是:如果没有缓存，IE 无法加载字体.不过，我不知道为什么只有在刷新/导航回来时才会出现问题.

编辑 - 替代解决方案

而不是评论最后两行

<块引用>

//不要使用以下两个中的任何一个 - 它们会破坏 IE 上的 CSS 字体HttpContext.Current.Response.Cache.SetCacheability(HttpCacheability.NoCache);HttpContext.Current.Response.Cache.SetNoStore();

将 SetAllowResponseInBrowserHistory 改为 true:

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

据我所知，这应该仍然允许无缓存，但后退和前进导航除外.MSDN - SetAllowResponseInBrowserHistory 方法

Our webdesigner has created a CSS with the following font-face:

@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;
}

It works fine on IE and Firefix. But there is an issue: on IE the fonts are rendered correctly only when I navigate the page using inner web page links. If I hit Refresh or Back button, the fonts are replaced by default font (Times New Roman).

Currently the website is using HTTPS but the same problem was observed when using HTTP.

When I navigate using inner website links, in the Network tab of IE Developer tools (Shift - F12), I see the following:

/Content/oxygen-regular-webfont.eot?    GET 200 application/vnd.ms-fontobject

When I use Refresh/Back buttons, there are two more entries for the other fonts as well:

/Content/oxygen-regular-webfont.woff    GET 200 application/x-font-woff
/Content/oxygen-regular-webfont.ttf GET 200 application/octet-stream

CSS file itself is being loaded in a following way:

/Content/site.css   GET 200 text/css

I tried to remove both woff and ttf so I had the following:

@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;
}

But still IE behaves the same way (except it does not download woff and ttf any more): displays incorrect fallback fonts when navigating through Back/Refresh.

How do I make IE to load correct fonts on Refresh/Back actions?

解决方案

I found a solution but I cannot see the reason why it works (well, only one reason - it's IE :D).

What I did was to put the same site on Apache and test again. On Apache the fonts worked fine even when using Refresh button. Then in the network inspector I saw that Apache is returning 304 instead of 200 for the eot file and it hit me - so it's caching issue. I went to my ASP.NET app and sure enough - for security reasons (and also to avoid caching AJAX requests) someone had disabled every caching you could imagine:

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

As soon as I commented out the last two lines of code, suddenly fonts started to work without problems on IE. So I guess the answer is: IE cannot load the font if it is not cached. I have no idea why the problem happens only when refreshing/navigating back, though.

Edit - Alternative solution

Instead of commenting those last two lines

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

Change the SetAllowResponseInBrowserHistory to true instead:

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

This should still allow no-cache with the exception of back and forward navigation as I understand it. MSDN - SetAllowResponseInBrowserHistory Method

这篇关于在 IE CSS font-face 仅在通过内部链接导航时才有效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！