Il carattere personalizzato a volte viene visualizzato in corsivo in IE8/IE7

Question

In IE7 e IE8, quando si utilizza un carattere Web personalizzato, il testo viene talvolta visualizzato in corsivo, anche quando imposto esplicitamente font-style: normal. Il problema è sporadico: verrà visualizzato correttamente alcune volte, quindi si aggiornerà e tutto è in corsivo, quindi si aggiorna e si ritorna alla normalità.

Sto usando questo @font-face dichiarazione:

@font-face { 
    font-family: 'DIN'; 
    src: url('fonts/DINWeb.eot'); 
    src: url('fonts/DINWeb.eot?#iefix') format('embedded-opentype'), 
     url('fonts/DINWeb.woff') format('woff'); 
    font-weight: normal; 
    font-style: normal; 
} 
@font-face { 
    font-family: 'DIN'; 
    src: url('fonts/DINWeb-Bold.eot'); 
    src: url('fonts/DINWeb-Bold.eot?#iefix') format('embedded-opentype'), 
     url('fonts/DINWeb-Bold.woff') format('woff'); 
    font-weight: bold; 
    font-style: normal; 
} 
@font-face { 
    font-family: 'DIN'; 
    src: url('fonts/DINWeb-Ita.eot'); 
    src: url('fonts/DINWeb-Ita.eot?#iefix') format('embedded-opentype'), 
     url('fonts/DINWeb-Ita.woff') format('woff'); 
    font-weight: normal; 
    font-style: italic; 
} 
@font-face { 
    font-family: 'DIN'; 
    src: url('fonts/DINWeb-BoldIta.eot'); 
    src: url('fonts/DINWeb-BoldIta.eot?#iefix') format('embedded-opentype'), 
     url('fonts/DINWeb-BoldIta.woff') format('woff'); 
    font-weight: bold; 
    font-style: italic; 
} 

Theres a comment su this article che indica che potrebbe essere di circa l'ordine dei @font-face dichiarazioni: tuttavia l'unica cosa che ha fermato il problema stava rimuovendo le dichiarazioni corsivo tutto .

Another Stack Overflow answer suggerisce di utilizzare il generatore Font Squirrel @ font-face; Tuttavia, non sono in grado di farlo, poiché i file dei font Web che sto utilizzando hanno DRM.

C'è un modo per risolvere questo problema senza rimuovere completamente le dichiarazioni in corsivo?

UPDATE: Su ulteriori indagini, sembra che questo problema riguardi anche IE8, non solo in modalità di compatibilità.

Answer 1

Per ciascuno dei nomi @font-facefont-family, creare invece un nome personalizzato.

Esempio:

@font-face { 
    font-family: 'DINnormal'; 
    src: url('fonts/DINWeb.eot'); 
    src: url('fonts/DINWeb.eot?#iefix') format('embedded-opentype'), 
     url('fonts/DINWeb.woff') format('woff'); 
    font-weight: normal; 
    font-style: normal; 
} 
@font-face { 
    font-family: 'DINbold'; 
    src: url('fonts/DINWeb-Bold.eot'); 
    src: url('fonts/DINWeb-Bold.eot?#iefix') format('embedded-opentype'), 
     url('fonts/DINWeb-Bold.woff') format('woff'); 
    font-weight: bold; 
    font-style: normal; 
} 
@font-face { 
    font-family: 'DINitalic'; 
    src: url('fonts/DINWeb-Ita.eot'); 
    src: url('fonts/DINWeb-Ita.eot?#iefix') format('embedded-opentype'), 
     url('fonts/DINWeb-Ita.woff') format('woff'); 
    font-weight: normal; 
    font-style: italic; 
} 
@font-face { 
    font-family: 'DINboldItalic'; 
    src: url('fonts/DINWeb-BoldIta.eot'); 
    src: url('fonts/DINWeb-BoldIta.eot?#iefix') format('embedded-opentype'), 
     url('fonts/DINWeb-BoldIta.woff') format('woff'); 
    font-weight: bold; 
    font-style: italic; 
} 

Dopo quelle regole CSS sono definiti, quindi è possibile includere regola CSS specifica:

li { 
    font: 18px/27px 'DINnormal', Arial, sans-serif; 
} 

Answer 2

Se, come me, si sono imbattuto in questa domanda, mentre vivendo un problema simile utilizzando i caratteri TypeKit, this entry from the TypeKit blog spiega come è possibile forzare nomi univoci font-family per ogni stile di peso & di un font TypeKit per affrontarlo.

Answer 3

Stavo avendo un problema simile, il font web veniva visualizzato in corsivo quando si utilizzava IE8 (emulatore), dopo aver scavato e scavato mi sono imbattuto in un articolo che suggeriva che l'emulatore a volte può essere fuorviante soprattutto quando si tratta di webfont e cosa suggerito stava provando il sito nel vero IE8, visto che sto usando una macchina Windows 7 non ero in grado di scaricare la cosa reale quindi ho usato questo sito chiamato http://www.browserstack.com/ (nessun tester o browser falso. Test nei browser reali incluso Internet Explorer 6 , 7, 8, 9, 10 e 11.)

e ho notato che il mio carattere non è stato in corsivo più: D

Ecco il link per l'articolo che ho letto,

http://blog.typekit.com/2013/03/14/the-dangers-of-cross-browser-testing-with-ie9s-browser-modes/

Spero che questo aiuti voi ragazzi, se mi sono imbattuto in qualcosa di simile quando la ricerca in realtà mi avrebbe risparmiato un paio d'ore