2013-10-03 12 views
9

Ho utilizzato il seguente codice per ottenere un carattere personalizzato nel mio sito Web! usando il seguente codice!Font Face non funziona in IE8 come previsto

@font-face{ 
    font-family:portagolTC; 
    src: url(../font/PortagoITC_TT.woff?) format('woff'); 
    src: url(../font/PortagoITC_TT.eot?#iefix) format('opentype'); 
} 

questo funziona in cromo, ff, IE10, IE9, ma non in IE8! Cosa sto facendo di sbagliato qui? Per favore correggimi se sto facendo qualcosa di sbagliato.

Nota: ho cercato su Google e trovato poche risposte StackOverflow ma nulla sembra risolvere il mio problema.

CSS3111: @font-face encountered unknown error. 
PortagoITC_TT.woff 
CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable. 
PortagoITC_TT.ttf 
CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable. 
PortagoITC_TT.ttf 
+0

DUPLICAT Possible [Aggiungi un carattere a un sito web] (http: //stackoverflow.com/a/16541871/1763929). – Vucko

+0

Ho controllato ma non funziona! –

+0

Forse è dovuto il carattere. Prova con uno diverso per il test. – Vucko

risposta

17

Se IE8 getta il CSS3111: @font-face encountered unknown error, probabilmente avete la non corrispondenti Nome font-family problema.

Per risolvere questo problema, è necessario modificare il file del carattere, definire nomi identici per Nome font, Nome famiglia e Nome per gli utenti ed esportare il TTF. Questo può essere fatto usando l'applicazione FontForge. Successivamente, dovrai convertirlo nuovamente per il Web (EOT, WOFF).

Maggiori informazioni: http://fontface.codeandmore.com/blog/ie-7-8-error-with-eot-css3111/

Aggiornamento

Ha reso lavorare scaricando una versione propria del carattere TTF e convertito per il web. Il CSS ho usato:

@font-face { 
    font-family: 'portagoitc-tt'; 
    src: url('fonts/portagoitc-tt.eot'); 
    src: url('fonts/portagoitc-tt.eot?iefix') format('opentype'), 
     url('fonts/portagoitc-tt.woff') format('woff'), 
     url('fonts/portagoitc-tt.ttf') format('truetype'); 
    font-weight: normal; 
    font-style: normal; 
} 
+0

Ho appena provato la soluzione. Ma niente di buono! –

+1

Ho appena provato a livello locale e funziona su tutti i browser (inclusi IE7 e IE8). Ho scaricato il formato TTF del font 'PortagoITC TT' e l'ho convertito per il web. Il CSS che ho usato: &at; font-face { font-family: 'portagoitc-tt'; src: url ('fonts/portagoitc-tt.eot'); src: formato url ('fonts/portagoitc -tt.eot? Iefix') ('opentype'), url ('fonts/portagoitc -tt.woff ') format (' woff '), url (' fonts/portagoitc -tt.ttf ') format (' truetype '); peso carattere: normale; stile carattere: normale; } Sembra essere un problema con i file dei font. Quale strumento hai usato per convertire? –

+0

Se potessi farmi sapere dove hai scaricato il font e convertito, potrebbe aiutarmi. e potresti aggiungere il CSS nella tua risposta .. –

2

Anche se la mia società ha acquistato il carattere, tutti i formati (EOT, WOFF ecc), non ho preso a lavorare in IE8 e IE10. Ho caricato il formato ttf su http://www.fontsquirrel.com/tools/webfont-generator e ho ottenuto un "webfont" ?? versione e ora funziona !!!

Dovrebbe aver guardato la console prima di IE, si sono verificati problemi di permiossione.

+0

Molto utile, grazie a @Daniel. – Jongosi

3

Ho avuto problemi con IE8 e avevo nessun messaggio di errore della console. Che risolto il mio problema è stato quello di modificare il mio codice @font-face leggermente:

Prima:

@font-face { 
    font-family: "Hero"; 
    src: local("Hero"), 
     url("../fonts/Hero.eot?"), 
     url("../fonts/Hero.woff") format("woff"), 
     url("../fonts/Hero.ttf") format("truetype"), 
     url("../fonts/Hero.svg#Hero") format("svg"); 
    font-weight: normal; 
    font-style: normal; 
} 

Dopo:

@font-face { 
    font-family: "Hero"; 
    src: url("../fonts/Hero.eot"); /* this line made the difference */ 
    src: local("Hero"), 
     url("../fonts/Hero.eot?"), 
     url("../fonts/Hero.woff") format("woff"), 
     url("../fonts/Hero.ttf") format("truetype"), 
     url("../fonts/Hero.svg#Hero") format("svg"); 
    font-weight: normal; 
    font-style: normal; 
}