errore CSS3111 quando l'incorporamento dei caratteri FontAwesome in IE8

Question

Sto usando FontAwesome (http://fortawesome.github.com/Font-Awesome/) come un font web sulla mia pagina:

http://www.jungledragon.org/apps/jd3/

Il mio problema è che il font non riesce a caricare in IE8 (modalità standard), invece vengono mostrati i blocchi quadrati. Dal momento che queste icone sono essenziali per il design, sono desideroso di risolvere questo problema.

Ho già effettuato molte domande e risposte, quindi lascia che ti dica cosa ho fatto per risolvere il problema. In primo luogo, sto usando il formato raccomandato per l'incorporamento questo tipo di carattere:

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

Questo è lo standard de facto per i font di carico x-browser e lo stesso output generato da strumenti come FontSquirrel. La directory type è relativa alla mia directory CSS e questo font verrà caricato in tutti i browser eccetto IE8.

In secondo luogo, ho le origini del dominio incrociato abilitate (CORS), quindi non è sicuramente il problema.

Alcune persone suggeriscono che il caricamento dello sht html5 potrebbe interferire con IE8 durante il caricamento del font, ma la rimozione del carico shiv tutto sommato non fa ancora la differenza.

Il sito è in esecuzione su Apache2, l'aggiunta di tipi di mime sembra non fare alcuna differenza per il risultato. Inoltre, posso confermare che posso scaricare il file eot da IE8 usando il percorso diretto, quindi il file è sicuramente accessibile.

Non ho idea di cosa sto facendo male, ma deve essere qualcosa sulla mia fine. Il motivo è semplice: aprire il sito Web ufficiale di FontAwesome da IE8 caricherà il font bene. Inoltre, anche il font secondario che sto usando (quello usato nel logo del sito) si presenta bene. Questo secondo font proviene da Google Webfonts, mentre il font fontawesome è ospitato nello stesso dominio del sito.

Sono a corto di idee su come risolvere questo, qualche indizio?

Aggiornamento: Vorrei aggiungere che nella barra degli strumenti di sviluppo di IE, questo è l'errore che sto ottenendo:

CSS3111: @ font-face ha riscontrato l'errore sconosciuto. fontawesome-webfont.eot

Ho trovato questo articolo che discute l'errore:

http://www.marinbezhanov.com/web-development/16/how-to-embed-webfonts-properly-and-how-to-solve-the-ambiguous-css3111-font-face-encountered-unknown-error/

... eppure io non vedo una soluzione dentro che mi aiuta.

Answer 1

In definitiva, questa risposta risolto il mio problema:

https://stackoverflow.com/a/12459447/80969

ho dovuto modificare il file TTF che è venuto con il pacchetto fontawesome scaricare utilizzando un programma di editing di carattere oscuro. Lì ho rinominato il "Nome del carattere umano" per essere uguale a tutti gli altri campi "nome". Successivamente, ho usato http://www.font2web.com/ per generare un nuovo file .eot e l'ho integrato nel progetto, mantenendo tutto il resto uguale. E presto, funziona!

Sembra che la mia versione di font-awesome abbia risolto il problema direttamente nel download.

Answer 2

Potrebbe valere la pena di verificare anche http://fontface.codeandmore.com/blog/ie-7-8-error-with-eot-css3111/.