2011-09-28 11 views
26

He intentado leer varios artículos sobre cómo tratar con fuentes personalizadas en IE, pero nunca me funcionaron. Traté de convertir las fuentes a EOT, pero eso tampoco pareció funcionar. No estoy seguro de lo que estoy haciendo mal, por lo que voy a publicar mi códigoCSS @ font-face no funciona en IE8

@font-face { 
    font-family: "Klavika Regular"; 
    src: url('../fonts/klavika.eot'); 
    src: local('☺'), url('../fonts/klavika.woff') format('woff'), url('../fonts/klavika.ttf') format('truetype'), url('../fonts/klavika.svg') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

Respuesta

40

esto funciona en IE8/9

http://dev.bowdenweb.com/a/fonts/serif/alegreya/demo.html

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

} 
+2

¿Por qué se eliminó local ('â~º')? ¿Para qué sirve? – Owen

+1

es otro truco para obtener font-face para jugar muy bien con es decir. Puede leer sobre las diferentes soluciones de fuentes en el blog de paul irish. – albert

0

si IE8 piensa que es compatible con cualquier otro formato que no sea eot de los enumerados a continuación, entonces probablemente va a tratar de utilizar ese uno. Tal vez usted podría utilizar un IE8 Hack, como

src: local('☺'), url('../fonts/klavika.woff') format('woff'), url('../fonts/klavika.ttf') format('truetype'), url('../fonts/klavika.svg') format('svg'); 
src /*\**/: url('../fonts/klavika.eot')\9 

por lo que sólo IE8 leerá el último src línea y por lo tanto cargar el .eot.

+0

Parece que no tiene ningún efecto. – hackshockr

0

Trate tres tipos de formatos para CSS @ font-face en FontSquirrel Generator (en "experto ..." modo> en la sección "Formatos de CSS:"> "más información")

+0

Bueno, el sitio se ve increíble y todo, excepto el botón "Descargar su kit", no parece hacer nada. – hackshockr

+0

Intenta volver a cargar la página y vuelve a cargar tu fuente en http://d.pr/U1yY Te aconsejo que leas las publicaciones en los enlaces "más información" (http://d.pr/r0Fn) – SidorukSV

+0

Sí, lo tengo. Pero incluye solo HTML y hojas de estilo, sin fuentes. – hackshockr

0

vale la pena comprobar para ver si el archivo .htaccess permite que el tipo de archivo.

Cuestiones relacionadas