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

font face no funciona

Question

En IE7 e IE8, cuando se utiliza una fuente web personalizada, el texto a veces se muestra en cursiva, incluso cuando configuro 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 esta declaración @font-face :

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

Hay un comentario en este artículo que indica que podría tratarse del orden de las declaraciones @font-face : sin embargo, lo único que detuvo el problema fue eliminar por completo las declaraciones en cursiva.

Otra respuesta de desbordamiento de pila 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 resolver esto sin eliminar por completo las declaraciones en cursiva?

ACTUALIZACIÓN: después de una investigación más profunda, parece que este problema también afecta a IE8, no solo en el modo de compatibilidad.

Answer 1

Para cada uno de sus nombres de font-family @font-face , 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 de definir esas reglas CSS, puede incluir una regla CSS específica:

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

Answer 2

Si, como yo, se encontró con esta pregunta al experimentar un problema similar con las fuentes TypeKit, esta entrada del blog TypeKit explica cómo puede forzar nombres únicos font-family para cada peso y estilo de una fuente TypeKit para abordarlo.

Answer 3

Estaba teniendo un problema similar, la fuente web se mostraba en cursiva al usar IE8 (emulador), después de cavar y excavar encontré un artículo que sugería que el emulador a veces podía ser engañoso, especialmente cuando se trataba de webFonts, y lo que sugería era probar el sitio en el IE8 real, como 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/ (No probadores o navegadores falsos. Prueba en real navegadores incluidos Internet Explorer 6, 7, 8, 9, 10 y 11.)

y noté que mi fuente ya no estaba en 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/

Espero que esto les ayude chicos, si me encontré con algo así cuando investigarlo realmente me hubiera ahorrado unas horas