CSS @ font-face no funciona en ie

Tengo el siguiente CSS que funciona con Firefox pero no con IE. Obviamente, las fuentes están dentro del directorio. ¿Alguna sugerencia?CSS @ font-face no funciona en ie

@font-face { 
    font-family: "Futura"; 
    src: url("../fonts/Futura_Medium_BT.eot"); /* IE */ 
    src: local("Futura"), url("../fonts/Futura_Medium_BT.ttf") format("truetype"); /* non-IE */ 
} 

body nav { 
    font-family: Futura, Verdana, Arial, sans-serif; 
    font-size:1.2em; 
    height: 40px; 
}

Fuente

2010-06-21 Shane

Puede usar el Google Font API. Dicen que funciona desde IE 6 y superior. (No he probado esto.)

las infraestructuras de servicio de Google toma encargará de convertir la fuente en un formato compatible con cualquier navegador moderno (incluyendo Internet Explorer 6 en adelante), ...

Fuente

2010-06-21 07:43:28 GvS

de http://readableweb.com/mo-bulletproofer-font-face-css-syntax/

Ahora que las fuentes web son compatibles con Firefox 3.5 y 3.6, Internet Explorer, Saf ari, Opera 10.5 y Chrome, los autores web enfrentan nuevas preguntas : ¿En qué difieren estas implementaciones? ¿Qué técnicas CSS acomodarán todas? El desarrollador de Firefox John Daggett publicó recientemente un pequeño resumen sobre estos problemas y las soluciones alternativas que se están explorando . En respuesta a esa publicación, y en respuesta a, particularmente, el trabajo de Paul Irish, , se me ocurrió la siguiente sintaxis de @ font-face CSS. Se ha probado en todos los navegadores mencionados anteriormente, incluidos IE 8, 7, y 6. Hasta ahora, todo bien. La siguiente es una página de prueba que declara la fuente gratuita Droid como una completa familia de fuentes con Regular, Cursiva, Negrita, y Bold Italic. Ver fuente para más detalles. Alerta: tenga en cuenta que Readable Web ha lanzado su primera utilidad de software relacionada con @ font-face para crear archivos EOT nativamente comprimidos rápida y fácilmente. Tiene su propio sitio web y, además de la utilidad en sí, el paquete de descarga contiene documentación útil, una fuente de prueba y una página de prueba de EOT . Se llama EOTFAST. Si está trabajando con @ font-face, , es imprescindible.

aquí está el ‘Código Bulletproofer Mo:

@font-face{ /* for IE */ 
    font-family:FishyFont; 
    src:url(fishy.eot); 
} 
@font-face { /* for non-IE */ 
    font-family:FishyFont; 
    src:url(http://:/) format("No-IE-404"),url(fishy.ttf) format("truetype"); 
}

Fuente

2010-06-21 07:48:15 RoToRa

Aquí es otra buena visión de conjunto: http://sixrevisions.com/css/font- face-guide/ –

He leído un montón de tutoriales que sugerían los cortes, por lo que me ocurrió con esta solución creo que es mejor ... Parece que funciona bien.

@font-face { 
    font-family: MyFont; src: url('myfont.ttf'); 
} 
@font-face{ 
    font-family: MyFont_IE; src: url('myfont.eot'); 
} 
.my_font{ 
    font-family: MyFont, MyFont_IE, Arial, Helvetica, sans-serif; 
}

Fuente

2010-08-04 23:59:31

Esta no debería ser la forma de hacerlo. Pruebe una sintaxis adecuada: [Fontspring Syntax] (http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax), [Reforzamiento adicional de la sintaxis a prueba de balas] (http: // www. fontspring.com/blog/further-hardening-of-the-bulletproof-syntax), [Mo 'Bulletproofer] (http://readableweb.com/mo-bulletproofer-font-face-css-syntax/), o [Smiley ] (http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax). – Paul

El hecho de que declare la fuente para, por ejemplo, en una regla de @ font-face separada, hizo mi día, ¡gracias por la sugerencia! – Andrei

¿Esto realmente funciona? – Bhimbim

Si sigue teniendo problemas con esto, aquí está la solución:

http://www.fontsquirrel.com/fontface/generator

Funciona mucho mejor/más rápido que cualquier otra fuente generadora y también da un ejemplo para que usted pueda utilizar.

Fuente

2011-10-31 13:26:42

Tenga cuidado con la lista negra. No podrá convertir algunas fuentes. – Spacemonkey

Fuente Squirrel no funcionó para mí. Cargué una fuente para la conversión a formato de fuente múltiple para soporte de IE. Se realizó onversion, que pude descargar. Luego subí contenido a mi servidor por especificación. Solo pude hacer funcionar Firefox o IE, pero no ambos. La solución que funcionó para mí fue el enlace The Mo Bullet Proofer anterior.

Fuente

2013-05-31 22:14:40 user2442032

para IE> 9 se puede utilizar la siguiente solución:

@font-face { 
    font-family: OpenSansRegular; 
    src: url('OpenSansRegular.ttf'), url('OpenSansRegular.eot'); 
}

Fuente

2014-03-25 17:53:23 UbiQue

He descubierto que si las declaraciones son cara de la fuente dentro de una consulta de medios de IE (ambos filos y 11) no se puede cargar ellos; Tienen que ser lo primero que declaró en la hoja de estilo y no envuelto en una consulta de medios

Fuente

2016-03-14 11:30:44 RichW

cambio según abajo

@font-face { 
    font-family: "Futura"; 
    src: url("../fonts/Futura_Medium_BT.eot"); /* IE */ 
    src: local("Futura"), url("../fonts/Futura_Medium_BT.ttf") format("truetype"); /* non-IE */ 
} 

body nav { 
    font-family: "Futura"; 
    font-size:1.2em; 
    height: 40px; 
}

Fuente

2017-08-04 13:29:29 user7393779

Respuesta

Cuestiones relacionadas