2012-04-22 12 views
9

Tengo problemas para mostrar la fuente de la fuente personalizada de mi cliente en IE8. Se muestra en IE 9 & 7 y Chrome obv. No estoy seguro de por qué esta versión de IE estaría causando problemas. Aquí es mi instrucción de inclusión en mi htmlNo se puede obtener @ font-face con Internet Explorer 8

<!--[if IE 8]> 
    <link rel="stylesheet" type="text/css" href="../styles/ie/cherokee_ie.css" /> 
    <![endif]--> 

Y aquí está el archivo cherokee_ie.css

@font-face { 
font-family: 'cherokee'; 
src: url('../../custom.eot'); 
src: url('../../custom.eot') format('embedded-opentype'), 
src: local('☺'), url('../../font/custom.woff') format('woff'), url('../../font/custom.ttf')    format('truetype'), url('../../font/custom.svg') format('svg'); 
font-weight: normal; 
font-style: normal; 
} 

h1 ul li { 
    font-family:cherokee; 
} 

No estoy realmente seguro de lo que la cara sonriente en src: local está haciendo, pero me pareció este código en otro SO pregunta que hizo que funcione perfectamente en IE7 (o al menos hasta donde puedo ver a través de BrowserLab.)

Además, ¿hay una forma más rápida de generar vistas que Browserlab?

+2

En cuanto al emoticón: evita que Internet Explorer lea el resto de ese valor e intente utilizar los otros tipos de fuentes y sus 'format()' s, que no son compatibles. – Ryan

+0

Oh, limpio. No sabía que pudieras hacer eso. ¿Es eso especial para ese personaje especial, o puedes hacer eso con cualquier personaje vacío? –

+2

Cualquier cosa funcionará, el truco es que IE no admite 'local()' en absoluto. La razón por la que se utilizan caracteres poco comunes es para evitar que se acceda a fuentes locales reales, lo que a veces puede dar como resultado problemas de seguridad. [Este artículo] (http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/) tiene más información. – Ryan

Respuesta

4

Retire la IE condicional y poner esto en tu CSS

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

} 

también utilizar '...' para fuentes font-face personalizados al igual que

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

También comprobar si sus caminos se establecen correctamente.

Cuestiones relacionadas