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

问题描述

我们的网页设计师使用以下font-face创建了一个CSS：

  @ font-face {
字体 - 家庭：'氧不规则'; 
 src：url（'oxygen-regular-webfont.eot'）; 
 src：url（'oxygen-regular-webfont.eot？#iefix'）format（'embedded-opentype'），
 url（'oxygen-regular-webfont.woff'）format '），
 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开发工具（Shift - F12）的网络选项卡中，我看到以下内容：

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

当我使用Refresh / Back按钮时，其他字体的条目：

  /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（'oxide-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请求）有人禁用了您可以想象的每个缓存：

  //出于安全原因阻止缓存
 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不能加载字体。

编辑 - 替代解决方案 b

而不是注释最后两行

，而不是注释最后两行

 使用以下两个 - 他们打破CSS字体在IE 
 HttpContext.Current.Response.Cache.SetCacheability（HttpCacheability.NoCache）; 
 HttpContext.Current.Response.Cache.SetNoStore（）; 
  

更改 SetAllowResponseInBrowserHistory 到 true 改为：

  HttpContext.Current.Response。 Cache.SetAllowResponseInBrowserHistory（true）; 
  

这应该仍然允许no-cache，除了back和forward导航，
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屋！