@ font-face opere in IE8, ma non IE9

Question

Come descritto sopra, non ho problemi con @ font-face che non visualizza in IE9, anche se mostra bene in ogni altro browser tra cui IE8 e sotto. Inoltre, durante la visualizzazione in locale sul mio computer, IE9 fa visualizzare il tipo di carattere, non solo quando è completamente dal vivo.

Il sito è:

bigwavedesign.co.uk/gcc/gcc/

Il codice utilizzato è il seguente:

    @font-face {
                font-family: 'LeagueGothicRegular';
                src: url('league_gothic_0-webfont.eot');
                src: local('League Gothic Regular'), url('league_gothic_0-webfont.woff') format('woff'), url('league_gothic_0-webfont.ttf') format('truetype'), url('league_gothic_0-webfont.svg#webfonta36nFpyE') format('svg');font-weight: normal;font-style: normal;
}

Chiunque tutte le idee perché questo potrebbe essere che si verificano?

Cheers!

=============================================

Modifica

Ho trovato il sito che visualizza lo stesso font ok in IE9, anyine qualche idea di come lo ha fatto?

http://iamthomasbishop.com/

Answer 1

Nessuna risposta, solo la conferma: Ho un simile tipo di problema. Font funziona in tutte le altre versioni di IE tranne IE9, sia utilizzando IETester e il browser originale. Quando si cambia modalità documento (strumenti F12 dev) opere di carattere. Non come mi piacerebbe, però.

Aggiorna : con un po 'di inganno sono riuscito a farlo funzionare. Sembra che IE9 sta usando il .woff versione del tipo di carattere (che avevo escluso) sopra il .eot che ho pensato che sarebbe. Ho usato il generatore @ font-face da fontsquirrel per ottenere tutte le diverse varianti di font e li incluse nel mio progetto, utilizzando il smileyface -local. Non c'era bisogno di alterare il mio file .htaccess. Ora funziona bene e sembra lo stesso in tutte le versioni di IE:

@font-face {
  font-family: "LucidaFax-bold";
  src: url("_font/LucidaFax-bold.eot");
  src: local("☺"),
  url("_font/LucidaFax-bold.woff") format("woff"),
  url("_font/LucidaFax-bold.ttf") format("truetype"),
  url("_font/LucidaFax-bold.svg#LucidaFax-bold") format("svg");
  }

h1 { font-family: "LucidaFax-bold", serif;}

---

( Ho anche avuto fresco pazzo con Mark "Tarquinio" Wilton-Jones' text-shadow hack, applicando stesso sguardo alle versioni di IE come resto del mondo del browser Old school Looks great Ne valeva la pena Beh, ho imparato molto ;.?!?).

Answer 2

Ho appena avuto lo stesso problema con il Web Fonts ospitato su un sito IIS7, come suggerito dal Grillz la questione è sceso a tipi MIME.

Ho scelto di utilizzare "application / octet-stream" sulla base delle risposte al Mime digitare per WOFF domanda.

1. Apri IIS e selezionare il sito che ospita i font (deve essere lo stesso nome di dominio per IE9 e Firefox)
2. Fare doppio clic "Tipi MIME"
3. Fai clic su "Aggiungi ..." in alto a destra.
4. In "estensione del nome del file:" inserire ".woff"
5. In "tipo MIME:" digitare "application / octet-stream"

La speranza che salva qualcuno 10 minuti in futuro.

Answer 3

Per noi il trucco è stato quello di cambiare solo il formato per i file .eot stiamo che servono.

Lavori in IE6-9, Firefox 3-4, Chrome, Safari, Android, iPhone.

@font-face {
    font-family: 'Museo';
    src: url('/ui/museo300.eot?') format('eot'),
         url('/ui/museo300.ttf')  format('truetype')
}

diventa:

@font-face {
    font-family: 'Museo';
    src: url('/ui/museo300.eot?') format('embedded-opentype'),
         url('/ui/museo300.ttf')  format('truetype')
}

Answer 4

La mia soluzione è quella di dichiarare due diversi tipi di carattere:

@font-face {
    font-family: "Dereza bold";
    src: local("Dereza bold"), url("../../assets/otf/dereza_bold.otf") format("opentype"); 
}

@font-face {
    font-family: "IE Dereza bold";
    src: url("../../assets/eot/dereza_bold.eot");
}

E poi:

.divclass {
  font-family: "Dereza bold", "IE Dereza bold";
}

Answer 5

Abalore 1

La mia soluzione:

@font-face {
    font-family: "OfficinaSansBookSCC";
    src: url('font/OfficinaSansBookSCC.eot'); 
    src: url('font/OfficinaSansBookSCC.eot') format('embedded-opentype'), 
         url( 'font/OfficinaSansBookSCC.ttf' ) format("truetype");
} 

lavorare in IE 7-9, Chrome, Opera, Firefox.

prima linea necessaria per IE 9, secondo per IE 7-8.

Answer 6

Bene visto che hai modificato il tuo messaggio al di sotto del testo non sarà la risposta. Stai puntando nella directory corretta? C'è qualche possibilità di questo essere un problema di tipo MIME dal server?

=============================================== =====

Questo potrebbe essere esso:

  

E 'importante notare che il sito deve rendere in documentMode 9, al fine di sfruttare le nuove funzionalità incluse con IE9 (che comprende tutte le nuove funzionalità di IE9, non solo quelli relativi ai font web). Se non avete sentito parlare di documentMode prima, Microsoft ha messo insieme una guida che spiega di cosa si tratta e come si può utilizzare sul tuo sito.

http: / /blog.typekit.com/2010/09/03/typekit-adds-experimental-support-for-ie9/

Answer 7

In IE9 - F12 un'occhiata alla schermata di debug vedere se ci sono errori CSS3117. Vedi anche: IE9 blocchi download del cross-origine del font web

Answer 8

Font Squirrel fornisce anche un meraviglioso strumento generatore per aiutare a creare un kit di carattere che includerà formati richiesti, CSS già scritto, e anche una pagina di prova per vedere come è tutto utilizzato, insieme con l'aiuto con i problemi che possono verificarsi.

E 'stato un gioco da ragazzi per incorporare la sua uscita nel mio sito e lo ha fatto risolvere il problema perfettamente.

Answer 9

Si dovrebbe verificare questo post del blog Paul irlandese ha un poche cose da dire circa i problemi che stanno venendo attraverso e ne viene fuori con quello che chiama un 'proiettile' @ font-face comunicato.

http://paulirish.com/2009/bulletproof-font-face -attuazione-sintassi /

Answer 10

http://www.fontsquirrel.com utilizza questo per la sua CSS campione che ha funzionato bene per il progetto I stava lavorando su.

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

Answer 11

ho avuto questo problema. Si scopre che mi mancava una virgola nella dichiarazione font-family.

Answer 12

ho voluto aggiungere ancora un'altra cosa che potrebbe andare storto in questo scenario. IE9 ha una regola che le dichiarazioni dei rigetti tutti @ font-face che non possono essere memorizzati nella cache dopo il primo carico. IE9 sarà effettivamente utilizzare il tipo di carattere correttamente sul primo schermo, ma su rinfresca successivi, il @ font-face sarà disattivata. Ho scoperto questo dopo aver chiuso il mio browser per caso, e poi riaprire per trovare che il mio carattere stava lavorando misteriosamente, per poi smettere di lavorare un aggiornamento più tardi.

Per risolvere questo problema, è semplice necessario assicurarsi che la richiesta servire il vostro carattere ha un'intestazione di risposta Cache-Control di qualcosa di diverso da no-cache. Suggerirei impostandolo a max-age=3600. Questo assicurerà il tipo di carattere viene memorizzato nella cache per un'ora. IE9 sarà quindi in grado di visualizzare il tipo di carattere in modo coerente.