2012-04-22 4 views
9

Sto avendo difficoltà a raggiungere il viso di carattere personalizzato del mio cliente di presentarsi in IE8. Si presenta in IE 9 & 7 e Chrome obv. Non sono sicuro del motivo per cui questa versione di IE potrebbe causare problemi. Qui è la mia istruzione include nel mio htmlNon si può ottenere @ font-face con Internet Explorer 8

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

E qui è il file 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; 
} 

Io non sono davvero sicuro di quello che la faccina sulla src: locale sta facendo, ma ho trovato questo codice in un altro SO domanda che ha reso il lavoro perfettamente in IE7 (o almeno per quanto posso vedere attraverso BrowserLab.)

Inoltre, c'è un modo più veloce per generare viste di BrowserLab?

+2

Per quanto riguarda lo smiley: si ferma Internet Explorer dal leggere il resto di tale valore e cercando di utilizzare altri tipi di font e la loro 'formato()' s, che non supporta. – Ryan

+0

Oh, pulito. Non sapevo che potessi farlo. È speciale per quel personaggio speciale o puoi farlo con qualsiasi personaggio vuoto? –

+2

Qualsiasi cosa funzionerà - il trucco è che IE non supporta affatto 'local()'. Il motivo per cui vengono utilizzati caratteri non comuni è l'interruzione dell'accesso ai caratteri locali effettivi, che a volte possono causare problemi di sicurezza. [Questo articolo] (http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/) ha qualche informazione in più. – Ryan

risposta

4

Rimuovere il IE condizionale e mettere questo nel 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; 

} 

anche usare '...' per i font font-face personalizzati in questo modo

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

anche controllare se i vostri percorsi sono impostati correttamente.