La fuente personalizada a veces se muestra en cursiva en IE8/IE7

Question

En IE7 e IE8, cuando se utiliza una fuente web personalizada, el texto a veces se representa en cursiva, incluso cuando establezco explícitamente font-style: normal. El problema es esporádico: se procesará varias veces, luego actualizaré y todo estará en cursiva, luego actualizaré y volverá a la normalidad.

estoy usando este @font-face declaración:

@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 en this article que indica que podría ser sobre el orden de las declaraciones @font-face: sin embargo, el único que detuvo el problema fue la eliminación de las declaraciones por completo en cursiva .

Another Stack Overflow answer sugiere utilizar el generador Font Squirrel @ font-face; Sin embargo, no puedo hacer esto ya que los archivos de fuentes web que estoy usando tienen DRM.

¿Hay alguna manera de solucionar esto sin eliminar por completo las declaraciones en cursiva?

ACTUALIZACIÓN: En una investigación posterior, parece que este problema afecta a IE8 también, no solo en el modo de compatibilidad.

Answer 1

Para cada uno de sus @font-facefont-family nombres, cree un nombre personalizado en su lugar.

Ejemplo:

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

Después se definen esas reglas CSS, entonces se puede incluir regla CSS específica:

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

Answer 2

Si, como yo, que se encontró esta pregunta mientras se experimenta un problema similar utilizando fuentes TypeKit, this entry from the TypeKit blog explica cómo puede forzar nombres únicos font-family para cada peso & estilo de una fuente TypeKit para abordarlo.

Answer 3

Estaba teniendo un problema similar, la fuente web se mostraba en cursiva al utilizar IE8 (Emulator), después de excavar y buscar encontré un artículo que sugiere que el emulador a veces puede ser engañoso especialmente cuando se trata de webFonts, y qué sugerí probar el sitio en el IE8 real, ya que estoy usando una máquina con Windows 7, no pude descargar la versión real así que utilicé este sitio llamado http://www.browserstack.com/ (sin probadores o navegadores falsos. Pruebe en navegadores reales, incluido Internet Explorer 6 , 7, 8, 9, 10 y 11.)

y me di cuenta de mi fuente no era más cursiva: D

Aquí está el enlace al artículo que leí,

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

Esperanza esto ayuda a ustedes, si me encontré con algo como esto cuando la investigación de lo que realmente me habría ahorrado unas cuantas horas