I font delle icone non vengono caricati in IE11

Question

Stiamo usando icomoon per i nostri font di icone e funzionano perfettamente con Chrome e Firefox, ma non verranno visualizzati in IE11 ... A volte. Sembra che funzioni sul caricamento della prima pagina, ma non sui carichi successivi della pagina. Cancellare la cache non sembra resettarlo. Questo problema potrebbe essere presente in altre versioni di IE, al momento ci stiamo concentrando su IE11.

Ecco la nostra @ font-face:

@font-face { 
font-family: 'icon'; 
src:url('fonts/icon.eot?-3q3vo5'); 
src:url('fonts/icon.eot?#iefix-3q3vo5') format('embedded-opentype'), 
    url('fonts/icon.woff?-3q3vo5') format('woff'), 
    url('fonts/icon.ttf?-3q3vo5') format('truetype'), 
    url('fonts/icon.svg?-3q3vo5#rezku') format('svg'); 
font-weight: normal; 
font-style: normal; 
} 

[class^="icon-"], [class*=" icon-"] { 
font-family: 'icon'; 
speak: none; 
font-style: normal; 
font-weight: normal; 
font-variant: normal; 
text-transform: none; 
line-height: 1; 

/* Better Font Rendering =========== */ 
-webkit-font-smoothing: antialiased; 
-moz-osx-font-smoothing: grayscale; 
} 
.icon-alphabet:before { 
content: "\e600"; 
} 
/* etc etc etc */ 

Ma qui è dove ottiene strano. Guardando gli strumenti di sviluppo, viene inviata una richiesta HTTP per i caratteri, ma vengono ricevute solo poche centinaia di byte (probabilmente solo le intestazioni).

Ma la risposta HTTP elenca la lunghezza del contenuto correttamente come diversi kilobyte.

La scheda "Response corpo" dice solo "Nessun dato da visualizzare."

È possibile vedere nello screenshot del pannello di rete che i caratteri Google non si comportano in questo modo.

Incollare l'URL nella barra degli indirizzi determina il download del file completo.

Answer 1

Si è imbattuto in un problema simile, e dal tuo screenshot di sopra, la risposta ha un'intestazione Cache-Control di 'no-store'. IE sembra avere problemi con il caching e i font.

Rimuovere sia "Cache-Control: no-store" che le intestazioni "Pragma: no-cache" hanno funzionato per far sì che i caratteri dell'icona si presentino di nuovo.

https://github.com/FortAwesome/Font-Awesome/issues/6454

Answer 2

La sintassi è corretta, tuttavia potrebbe esserci un problema con il modo in cui qualsiasi convertitore è stato utilizzato per convertire da .tff a .eof. Vedere questo articolo per ulteriori dettagli su questo argomento in generale http://www.iandevlin.com/blog/2009/12/webdev/adventures-with-font-face

Nel frattempo è possibile provare a testare il problema utilizzando un font ospitato da Google font. Dico questo perché Google gestisce la compatibilità cross-browser senza problemi. Se risulta che il carattere di Google funziona, sai che è un problema con il modo in cui il tuo font è stato convertito e devi provarne un altro. Da quello che capisco, Font Squirrel è veramente bravo a generare caratteri compatibili con i browser. Spero che questo aiuti buona fortuna

Answer 3

Ho avuto un problema simile e sembra essere causato da IE avendo difficoltà con certi display e position impostazioni in combinazione con iconfonts.

Dovrebbe solito lavorare con:

element:before { 
    display:block; 
    position: absolute; 
    ... your styles ... 
} 

Answer 4

ho affrontato problema simile ma con Bootstrap icone di font (Glyphicons). Puoi provare se questo funziona:

(Generalmente su Windows 10) le impostazioni di IE-11 sono state modificate per non scaricare alcun font esterno e utilizzare solo i tipi di carattere disponibili in Windows. Questo è il comportamento predefinito.

Tuttavia, è possibile modificare questa impostazione in IE per consentire il download di caratteri esterni.Di seguito sono da prendere le misure in IE- Vai a: Impostazioni >> Opzioni Internet >> Sicurezza

Clicca su “Internet” (o qualsiasi zona che si può essere utilizzato) >> “Livello personalizzato ...”
Avanti nelle "impostazioni di sicurezza" - Abilita "Scarica font". Di default sarebbe disabilitato.

aggiornare la pagina

Answer 5

Dopo aver esaminato lo stesso problema, e passando attraverso varie soluzioni pubblicate online, ho creato il seguente elenco di risoluzione dei problemi, che copre la maggior parte potenziali cause:

1. Font i download sono disabilitati in IE, in Opzioni Internet/Sicurezza/Livello personalizzato/Download caratteri abilitati/disabilitati. Potrebbero essere disabilitati dal tuo amministratore di rete, nel qual caso non saresti in grado di vedere o modificare questa impostazione.
2. Le intestazioni HTTP impediscono a IE di memorizzare localmente il file del font. Per risolvere il problema, rimuovere le intestazioni Cache-Control: no-store, no-cache o Pragma: no-cache o qualsiasi altra intestazione Expires con una data nel passato. Anche l'intestazione Vary ha i suoi trucchi in IE, se impostato su qualcosa di diverso da Accept-Encoding, User-Agent, Host o Accept-Language allora IE non memorizzare nella cache nulla, a meno che non un'intestazione ETAG è presente anche (vedi this MSDN blog post).
3. Non si impostano i tipi MIME corretti per il download dei font. Ad esempio, Jetty 9 imposterà per impostazione predefinita Content-Type: text/plain per i tipi di carattere usuali (eot, woff, woff2). Vedere this answer per i tipi di contenuto corretti da utilizzare.
4. Assicurarsi di utilizzare display: block o display: inline-block per l'elemento icona.
5. Infine, assicurati di passare attraverso il troubleshooting guide su FontAwesome.