2012-04-24 19 views
7

Acabo de instalar las fuentes Aller Regular y Aller en negrita en mi sitio a través de @ font-face (generado por fontsquirrel.com).@ font-face se bloquea IE8

Aquí es el CSS:

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

} 

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

} 

Esto funciona bien cuando se utiliza éter de las fuentes en Firefox, sin embargo cuando utilizo IE8 la página web falla intentos para reabrir y bloquea de nuevo. Un ejemplo en vivo se puede encontrar en http://rcnhca.org.uk/sites/first_steps/

¿Alguien sabe lo que está causando esta locura?

Respuesta

4

IE8 parece preferir las comillas dobles. Este texto fijo sin estilo en primera carga para mí, podría solucionar los bloqueos por usted.

Felicitaciones al tipo aquí, que resolvió mi problema: @font-face not embedding in IE8 and under

9

que tenían el mismo problema hace un tiempo, y después de algún depuración he encontrado que el accidente fue debido a la @font-face (que en mi caso fue incluido como una hoja de estilo separada denominada fonts.css) se procesó dentro de <head>. IE8 tiene un problema con esto, pero funciona bien cuando moví la representación a solo dentro de <body>.

Prueba esto:

<head> 
    <!--[if gt IE 8]><!--> 
    <link href="fonts.css" rel="stylesheet" type="text/css"> 
    <!--><![endif]--> 
</head> 
<body> 
    <!--[if IE 8]> 
    <link href="fonts.css" rel="stylesheet" type="text/css"> 
    <![endif]--> 
    <!-- The rest of your page here --> 
</body> 

Esto hace que la hoja de estilo de letra dentro de su cabeza si el navegador es más reciente que IE8. Si el navegador es IE8, lo renderiza solo dentro de su cuerpo.

Nota: Es posible que deba ajustar los comentarios condicionales si es compatible con IE7 o una versión anterior.

1

Tenía una página similar de desarrollo de issure con fuentes personalizadas. IE8 se estrelló. Lo arreglé colocando IE8 font-face declaration ANTES de cualquier otra declaración de tipo de letra. I.E:

<!-- Custom .eot fonts for IE8 --> 
<!-- IE8 fonts should load before other font-face declarations to avoid IE8 crash --> 
<!--[if lt IE 9]> 
    <link rel="stylesheet" href="/pub/stylesheets/fonts-ie8.css" />  
<![endif]--> 

<!-- Custom .woff fonts --> 
<link href="/pub/stylesheets/fonts.css" rel="stylesheet"> 
Cuestiones relacionadas