¿Los navegadores IE (IE6, 7, 8) son compatibles con @ font-face?

Question

De acuerdo con este artículo, http://www.standardista.com/css3/font-face-browser-support IE apoya @font-face pero no pude encontrar ningún sitio que tiene cara de la fuente de trabajo personalizado válido para IE

Además, si es compatible con IE fuente personalizada a través de @font-face desde el principio (IE6), entonces ¿por qué ¿Todavía hay gente que usa cufon por ejemplo?

¿Alguna aclaración o ejemplos?

Answer 1

La versión anterior de Internet Explorer admite Embedded OpenType (EOT) archivos antes de @font-face se formalizó en CSS3. Puede encontrar archivos compatibles en sitios como FontSquirrel o Google's Font API. La herramienta de conversión de FontSquirrel también debería ayudar aquí. También vale la pena leer the latest bulletproof syntax recommended by fontspring para incrustar múltiples archivos para múltiples navegadores.

---

El hecho de que esto no se utiliza con frecuencia hasta hace poco es de dos pliegues; primero hay problemas legales con el uso de fuentes @font-face - derechos de autor para ser específicos. A diferencia del cufón que solo conserva la forma de las fuentes, con @font-face está transmitiendo las mismas fuentes, lo que tiene implicaciones legales.

El otro problema es el apoyo en otros navegadores - Firefox 3 fue el último de los navegadores modernos a no apoyar @font-face de alguna manera, por lo que antes del lanzamiento de Firefox 3.5 a mediados de 2009 @font-face todavía no era viable. Además de todo eso, existen diferencias en el soporte de formato entre los navegadores, por lo que el desarrollo de la tecnología es lento.

Answer 2

Internet Explorer 9 requiere una fuente de tipo EOT. Las fuentes TTF se pueden usar en la mayoría de las otras versiones recientes de navegador y SVG para dispositivos como iPhone y iPad. Puede obtener más información sobre el soporte del navegador para @ font-face aquí http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

Font Squirrel es también un gran recurso para crear archivos de fuentes web, incluido EOT, de sus archivos de fuentes existentes. Asegúrese de tener una licencia para usar las fuentes en la web. Se puede acceder al generador de archivo de fuentes web gratuito aquí: http://www.fontsquirrel.com/fontface/generator

Una entrada CSS típico para un conjunto @ font-face es el siguiente:

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

A continuación, puede llamar a su fuente mediante la asignación de la "fuente -family" atributo mediante css

.my-class { font-family: "custom-font" } 

Answer 3

también puede escribir:

@font-face { 
    font-family: 'custom-font'; 
    src: url('/some/directory/custom-font.eot'); 
} 
@font-face { 
    font-weight: normal; 
    font-style: normal; 
    font-family: 'custom-font'; 
    src: url('/some/directory/custom-font.woff') format('woff'), 
     url('/some/directory/custom-font.ttf') format('truetype'), 
     url('/some/directory/custom-font.svg#webfont') format('svg'); 
} 

Funciona tan bien como en el ejemplo anterior, sin usar el "?" marca.

Answer 4

Sí lo hacen a partir de IE6 *. Un trabajo example.

La fuente debe seguir algunas reglas especiales, por ejemplo, el nombre de la fuente debe comenzar con el apellido y el apellido en el CSS debe coincidir con el apellido de la fuente.

Si utiliza la fuente ardilla webfont generator para generar un .eot de .ttf, se asegurará de que el .eot generado se pueda utilizar en IE6.

* Tenga en cuenta que hay aliasing issues con fuentes personalizadas en IE6/7/8.