Destello de contenido sin estilo en IE con @ font-face

Question

Estoy trabajando en un sitio que utiliza el tipo de letra Open Sans para el texto del cuerpo, con archivos de fuentes EOT, SVG, WOFF y TTF y hojas de estilo generadas por Font Squirrel. He incluido mis fuentes de CSS primero en el encabezado de mi página. Pero cuando veo el sitio en IE7, IE8 e incluso IE9 obtengo un destello de todo en Times Roman antes de que comience Open Sans. Esto no está sucediendo en los otros navegadores.

¿Alguien puede sugerir una forma de evitar que esto ocurra? Aquí está la CSS Font Squirrel estoy usando para ese tipo de letra:

@font-face { 
    font-family: 'OpenSansRegular'; 
    src: url('opensans-regular-webfont.eot'); 
    src: url('opensans-regular-webfont.eot?#iefix') format('embedded-opentype'), 
     url('opensans-regular-webfont.woff') format('woff'), 
     url('opensans-regular-webfont.ttf') format('truetype'), 
     url('opensans-regular-webfont.svg#OpenSansRegular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

Answer 1

Lo que se ve, mientras que la fuente personalizada está siendo descargado no está definido en el código de seguridad. Se define en sus otras instrucciones font-family a lo largo de su código CSS.

Agregue otras fuentes después del valor 'OpenSansRegular', separadas por comas. De derecha a izquierda:

• a la derecha, la familia de su fuente. serif, sans-serif, monospace o cursive (yay Comic Sans!). Aquí, OpenSansSth es ... sans-serif.
  Su navegador tiene un valor predeterminado para estas familias, Arial, Verdana o alguna otra fuente en Linux, lo que sea. Es la elección del usuario cuando no elige para él. La familia predeterminada es serif y la fuente predeterminada en Windows es 'Times New Roman'. Es por eso que ves Times New Roman como un FOUC en IE.
• una fuente segura para la Web que sea lo más parecida posible a su fuente personalizada. Aquí sería una fuente sans-serif como Verdana o Arial. Tal vez sans-serif y Verdana sean lo mismo, pero nunca está seguro (especialmente con usuarios de Linux), así que agregue ambos
• . Entre su fuente personalizada y la web segura, puede agregar fuentes que podrían instalarse bastante algunos SO, pero no son seguros para la web como los instalados con MS Office, Adobe Reader, OS X, Adobe Creative Suite, etc. Los encontrará en 10 a 90% de las computadoras de sus visitantes, pero no en 100%. No todo el mundo instala Creative Suite (solo web profesionales y otros diseñadores) y MS Office (uso LibreOffice) y hay diferentes fuentes instaladas en XP, Vista y 7
• , finalmente, el valor más a la izquierda será el nombre personalizado que le asignó tu fuente personalizada. OpenSansRegular en su sitio

Ex:

  nav { font-family: 'Custom_at-font-face','closest font to the font-face one but certainly rarely found on computers by default', 'less close, 'not close but same family', Verdana,sans-serif; 
     } 

tablas de compatibilidad con porcentajes (tal vez un poco de edad) http://www.codestyle.org/css/font-family/
No utilice los valores de 10, 3 a 6 tal vez será suficiente;) En el año 2012 @ font-face puede causar problemas de representación según el navegador y el sistema operativo (aliasing) pero está muy bien soportado para que pueda acortar sus familias de fuentes.

Answer 2

jQuery complemento para ocultar FOUC de @font-face se puede encontrar aquí: How to know if a font (@font-face) has already been loaded? Se ha eliminado el bloque de código de este hilo, ya que lo he estado actualizando allí.