Sulla IE CSS font-face funziona solo durante la navigazione attraverso i link interni

Question

nostro webdesigner ha creato un CSS con il seguente 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; 
} 

Funziona bene su IE e Firefix. Ma c'è un problema: su IE i font vengono renderizzati correttamente solo quando navigo nella pagina usando i collegamenti interni alle pagine web. Se clicco su Aggiorna o Indietro, i caratteri vengono sostituiti dal carattere predefinito (Times New Roman).

Attualmente il sito Web utilizza HTTPS ma lo stesso problema è stato osservato quando si utilizza HTTP.

Quando ho navigare utilizzando link di siti web interni, nella scheda Rete di strumenti di IE Developer (Shift - F12), compaiono i seguenti:

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

Quando uso Aggiornare i pulsanti/indietro, ci sono altri due voci per gli altri tipi di carattere così:

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

file CSS stesso viene caricato in modo seguente:

/Content/site.css GET 200 text/css 

Ho provato a rimuovere sia WOFF e TTF così ho avuto il seguente:

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

Ma ancora IE si comporta allo stesso modo (tranne che non scarica WOFF e TTF più): visualizza i caratteri di fallback non corretti durante la navigazione tra Indietro /Ricaricare.

Come si fa a IE caricare i caratteri corretti sulle azioni Aggiorna/Indietro?

Answer 1

Ho trovato una soluzione ma non riesco a vedere il motivo per cui funziona (beh, solo una ragione: è IE: D).

Quello che ho fatto è stato mettere lo stesso sito su Apache e provare di nuovo. Su Apache i font funzionavano bene anche quando si utilizza il pulsante Aggiorna. Poi nell'ispettore di rete ho visto che Apache restituisce 304 invece di 200 per il file eot e mi ha colpito - quindi è un problema di cache. Sono andato a mia app ASP.NET e abbastanza sicuro - per ragioni di sicurezza (e anche per evitare le richieste di caching AJAX) qualcuno aveva disattivato ogni caching che si possa immaginare:

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

Appena ho commentato le ultime due righe di codice, i font improvvisamente hanno iniziato a funzionare senza problemi su IE. Quindi credo che la risposta sia: IE non può caricare il font se non è memorizzato nella cache. Non ho idea del motivo per cui il problema si verifica solo durante l'aggiornamento/navigazione indietro, però.

Edit - Soluzione alternativa

invece di commentare queste ultime due righe

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

cambiare il a true invece:

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

Questo dovrebbe comunque consentire la no-cache con l'eccezione della navigazione indietro e avanti come ho capito. MSDN - SetAllowResponseInBrowserHistory Method

Answer 2

Assicurarsi che non si tratti di un problema di pathing, ovvero il file CSS è relativo a dove si trovano i caratteri. Nel tuo caso, hai bisogno del tuo file CSS nella stessa cartella dei tuoi file di font.

Answer 3

Ho affrontato lo stesso problema.

Nel caso in cui intestazione del file .eot contiene Cache-Control: no-cache valore, IE9 non viene caricato correttamente carattere. strumenti di sviluppo hanno mostrato Risultato-200, ma colonna ricevuti mostrato 400B, nello stesso tempo Content-Length era 70Kb. Ho usato il seguente valore Cache-Control: max-età = 0, per risolvere il problema.

Answer 4

Rimozione della risposta globale Le impostazioni di NoCache e NoStore risolveranno i caratteri, ma se sono necessarie tali impostazioni, ovviamente questa non è una risposta.

La mia comprensione è che solo l'impostazione della cache a scaduta non impedirà in modo coerente la visualizzazione delle pagine memorizzate nella cache; forza un controllo sul server ma se la pagina non viene modificata (304 risposte) può (di solito?) visualizzare ancora la versione cache.

(In realtà la lettura di questo ora è venuto in mente che l'impostazione cache del client per scadere immediatamente in combinazione con SetNoServerCaching potrebbe forzare la pagina del cliente di rinnovare sempre? Sembra che potrebbe avere implicazioni sulle prestazioni però.)

ho trovato che in ASP.NET MVC che utilizza l'attributo OutputCacheAttribute su un controller per disabilitare la memorizzazione nella cache non interrompe i caratteri IE.

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

mi rendo conto NoStore non è la stessa come SetCacheability (HttpCacheability.NoCache), ma sembra funzionare per questo scopo.

È possibile creare un controller di base con l'attributo da ereditare per rendere il pulitore del codice.

Answer 5

JustAMartin 's answer ci ha portato a una soluzione diversa:

invece di commentare queste ultime due righe

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

Abbiamo aggiunto la seguente riga:

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

Questo dovrebbe comunque consentire la no-cache con l'exce ption di back and forward navigation come ho capito. MSDN - SetAllowResponseInBrowserHistory Method

Answer 6

Ho appena avuto lo stesso problema, e per coloro che vogliono avere una soluzione pura (non esatta tecnologia correlata): è necessario fare in modo che le intestazioni di carattere che si sta inviando, non hanno da dire no-cache. In cima a ciò che è stato scritto prima, ci sono in realtà due intestazioni che possono farlo:

"cache-control: no-cache" 

e

"pragma: no-cache" 

Sia di coloro che hanno da dire del browser stesso, il primo è parte di HTTP1. 1, il secondo è più vecchio (HTTP1.0).

Ora, le soluzioni:

• Se davvero si vuole servire i font (?) E altri file senza lato client caching, impostare "cache-control" to "max-age=0"; è possibile eliminare l'intestazione di pragma, è obsoleta (o impostarla su "pragma: cache").
• Se in realtà si desidera avere il caching: rimuovere i valori no-cache e impostare l'età massima corretta (ad esempio "cache-control: max-age=3600" - cache di un'ora). Pragma può essere impostato su "pragma: cache" o rimosso completamente.

Answer 7

Ho trovato una soluzione alternativa per risolvere questo problema.

Ho incorporato il font direttamente in un foglio di stile invece di caricarlo come un file di font separato. Funziona perfettamente con tutti i browser, inclusi Windows, Mac, IOS, Android ecc. E aiuta a ridurre il numero di richieste HTTP nella pagina web.

Ciò non richiederà alcuna modifica nell'intestazione 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; }

È possibile utilizzare comando built-in Base64 in OS X o Linux per la codifica dei caratteri.

Answer 8

non si imposta la richiesta di intestazione Vary a HTTPS

Nessun carattere carico

Vary:Accept-Encoding,https 

Opere

Vary:Accept-Encoding 

Impostazione dell'intestazione della cache è necessario avoid delayed font loading.