On IE CSS font-face funktioniert nur, wenn sie durch innere Links

Question

Unsere Webdesigner erstellt eine CSS mit folgendem font-face Navigation:

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

Es funktioniert auf IE und Firefix. Aber es gibt ein Problem: Auf IE werden die Schriftarten nur richtig wiedergegeben, wenn ich die Seite mit inneren Webseitenlinks navigiere. Wenn ich die Schaltfläche Aktualisieren oder Zurück drücke, werden die Schriftarten durch die Standardschriftart (Times New Roman) ersetzt.

Derzeit verwendet die Website HTTPS, aber das gleiche Problem wurde bei der Verwendung von HTTP beobachtet.

Wenn ich innere Website-Links navigiert werden, in der Registerkarte Netzwerk von IE Entwickler-Tools (Shift - F12), sehe ich folgendes:

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

Wenn ich Refresh/Zurück-Tasten verwenden, gibt es zwei weitere auch Einträge für die anderen Schriftarten:

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

CSS-Datei selbst auf folgende Weise geladen wird:

/Content/site.css GET 200 text/css 

ich beide woff und ttf so hatte zu entfernen habe ich versucht, die folgenden:

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

Aber noch verhält IE auf die gleiche Weise (außer es woff nicht herunterladen und ttf mehr): zeigt falsche Rückfall-Schriften beim Navigieren durch Zurück /Aktualisierung.

Wie mache ich IE zum Laden korrekter Schriftarten auf Refresh/Back Aktionen?

Answer 1

Ich habe eine Lösung gefunden, aber ich kann nicht den Grund sehen, warum es funktioniert (naja, nur einen Grund - es ist IE: D).

Was ich getan habe, war, die gleiche Seite auf Apache zu setzen und erneut zu testen. Auf Apache funktionierte die Schrift auch bei Verwendung der Refresh-Taste einwandfrei. Dann sah ich im Netzwerk-Inspektor, dass Apache 304 statt 200 für die EOT-Datei zurückgibt und es hat mich getroffen - so ist es Caching-Problem. Ich ging zu meinem ASP.NET app und sicher genug - aus Sicherheitsgründen (und auch Caching AJAX-Anfragen zu verhindern) jemand jeden Caching deaktiviert hatte man sich vorstellen kann:

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

Sobald ich aus den letzten beiden Zeilen kommentiert von Code, plötzlich Schriften begannen ohne Probleme auf IE zu arbeiten. Also ich denke die Antwort ist: IE kann die Schriftart nicht laden, wenn sie nicht zwischengespeichert wird. Ich habe keine Ahnung, warum das Problem nur beim Auffrischen/Navigieren auftritt.

Bearbeiten - Alternative Lösung

Statt diese letzten beiden Zeilen

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

Ändern Sie den zu true statt Kommentierung:

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

Dies sollte weiterhin No-Cache zulassen, mit Ausnahme der Vor- und Zurück-Navigation, so wie ich es verstehe. MSDN - SetAllowResponseInBrowserHistory Method

Answer 2

Stellen Sie sicher, dass es sich nicht um ein Pfadproblem handelt, d. H. Ihre CSS-Datei ist relativ zur Schriftart. In Ihrem Fall benötigen Sie Ihre CSS-Datei im selben Ordner wie Ihre Schriftartdateien.

Answer 3

Ich habe mit dem gleichen Problem konfrontiert.

Im Fall, wenn Header der .eot Datei enthalten Cache-Control: no-cache Wert, IE9 Schriftart nicht richtig laden. Entwicklungstools zeigte Ergebnis-200, aber Spalte Received 400B gezeigt, in der gleichen Zeit Content-Length 70Kb war. Ich habe folgenden Wert verwendet Cache-Control: max-age = 0, um das Problem zu beheben.

Answer 4

Entfernen der globalen Antwort NoCache und NoStore Einstellungen werden die Schriftarten korrigieren, aber wenn Sie diese Einstellungen benötigen, dann ist das natürlich keine Antwort.

Mein Verständnis ist, dass nur die Einstellung des Cache auf abgelaufen verhindert nicht konsistent die Anzeige von zwischengespeicherten Seiten; Es erzwingt eine Überprüfung auf dem Server, aber wenn die Seite nicht geändert wird (304 Antwort) kann (in der Regel?) immer noch die zwischengespeicherte Version anzeigen.

(Eigentlich ist das jetzt liest es mir aufgetreten ist, dass Einstellung Client-Cache sofort mit SetNoServerCaching in Kombination ablaufen könnte die Client-Seite immer zu erneuern erzwingen? Scheint, wie es allerdings Auswirkungen auf die Leistung haben könnte.)

Ich habe festgestellt, dass in ASP.NET MVC mit dem OutputCacheAttribute-Attribut auf einem Controller zum Deaktivieren der Zwischenspeicherung IE Zeichensätze nicht zu brechen.

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

Ich weiß, NoStore nicht das gleiche wie SetCacheability (HttpCacheability.NoCache) ist, aber es scheint für diesen Zweck zu arbeiten.

Sie könnten einen Basis-Controller mit dem zu erben Attribut erstellen, um den Code sauberer zu machen.

Answer 5

JustAMartin ‚s answer führte uns zu einer anderen Lösung:

Statt kommentieren diese letzten beiden Zeilen

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

Wir haben die folgende Zeile:

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

Dies sollte immer noch keine Zwischenspeicherung mit dem exce zulassen ption der Vorwärts- und Rückwärtsnavigation, wie ich es verstehe. MSDN - SetAllowResponseInBrowserHistory Method

Answer 6

Ich hatte gerade den gleichen Fehler, und für diejenigen, die eine reine Lösung (nicht exact-Technologie im Zusammenhang) haben wollen: Sie müssen sicherstellen, dass die Schriftart-Header Sie senden nicht no-cache sagen werden. Hinzu kommt, was vorher geschrieben wurde, gibt es tatsächlich zwei Header, die es tun können:

"cache-control: no-cache" 

und

"pragma: no-cache" 

Beide diejenigen sagen Browser die gleichen, die erste ist Teil HTTP1. 1, der zweite ist älter (HTTP1.0). Jetzt

, Lösungen:

• Wenn Sie wirklich die Schriften dienen wollen (? Und andere Dateien) ohne Client-seitiges Caching, setzen "cache-control" to "max-age=0"; Sie können den Pragma-Header löschen, er ist veraltet (oder setzen Sie ihn auf "pragma: cache").
• Wenn Sie tatsächlich Caching haben möchten: Entfernen Sie no-cache Werte, und legen Sie richtige Max-Alter (z. B. "cache-control: max-age=3600" - eine Stunde Cache). Pragma kann auf "pragma: cache" eingestellt oder komplett entfernt werden.

Answer 7

Ich habe eine alternative Lösung gefunden, um dieses Problem zu beheben.

Ich habe die Schriftart direkt in Stylesheet eingebettet, anstatt sie als separate Schriftartdatei zu laden. Dies funktioniert in allen Browsern einwandfrei, einschließlich Windows, Mac, iOS, Android usw. und hilft, die Anzahl der HTTP-Anfragen auf der Webseite zu reduzieren.

Dies erfordert keine Änderung in Header 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; }

Sie können in OS X oder Linux für Schriftcodierung eingebaute in base64-Befehl verwenden.

Answer 8

Setzen Sie nicht die Request-Header Vary

Keine Schrift Laden

Vary:Accept-Encoding,https 

Works

Vary:Accept-Encoding 

Einstellen der Cache-Header avoid delayed font loading notwendig https.