2012-04-24 11 views
7

Ho appena installato i caratteri Aller Regular e Aller grassetto sul mio sito tramite @ font-face (generato da fontsquirrel.com).@ arresti font-face IE8

Ecco il 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; 

} 

Questo sta lavorando bene quando uso etere dei caratteri in Firefox, ma quando uso IE8 la pagina web si blocca i tentativi di riaprire e si blocca di nuovo. Un esempio dal vivo può essere trovato a http://rcnhca.org.uk/sites/first_steps/

Qualcuno sa che cosa sta causando questa follia?

risposta

4

IE8 sembra preferire le doppie virgolette. Questo testo unstiled al primo caricamento per me, potrebbe risolvere i crash per te.

Complimenti per il ragazzo qui, che ha risolto il mio problema: @font-face not embedding in IE8 and under

9

Ho avuto lo stesso problema qualche tempo fa, e dopo un po 'di debug ho trovato che l'incidente è stato a causa della @font-face (che nel mio caso è stato incluso come un foglio di stile separato chiamato fonts.css) è stato reso all'interno di <head>. IE8 ha un problema con questo, ma funziona bene quando ho spostato il rendering solo all'interno di <body>.

Prova questo:

<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> 

Questo rende il foglio di stile font all'interno della vostra testa se il browser è più recente di IE8. Se il browser è IE8, lo rende solo all'interno del tuo corpo.

Nota: potrebbe essere necessario regolare i commenti condizionali se si supporta IE7 o precedente.

1

Ho avuto similiarmente issure lo sviluppo della pagina con caratteri personalizzati. IE8 si è schiantato. L'ho risolto posizionando la dichiarazione di font-font IE8 PRIMA di qualsiasi altra dichiarazione di font-face. 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">