CSS @ font-face che non funziona in es.

Question

Ho il seguente CSS che funziona con Firefox ma non con IE. Ovviamente, i caratteri sono all'interno della directory. Eventuali suggerimenti?

@font-face { 
    font-family: "Futura"; 
    src: url("../fonts/Futura_Medium_BT.eot"); /* IE */ 
    src: local("Futura"), url("../fonts/Futura_Medium_BT.ttf") format("truetype"); /* non-IE */ 
} 

body nav { 
    font-family: Futura, Verdana, Arial, sans-serif; 
    font-size:1.2em; 
    height: 40px; 
} 

Answer 1

È possibile utilizzare lo Google Font API. Dicono che funziona da IE 6 in su. (Non ho provato questo.)

infrastrutture a servizio di Google prende cura di convertire il tipo di carattere in un formato compatibile con qualsiasi moderna del browser (compreso Internet Explorer 6 in su), ...

Answer 2

Da http://readableweb.com/mo-bulletproofer-font-face-css-syntax/

Ora che i font web sono supportati in Firefox 3.5 e 3.6, Internet Explorer , Saf ari, Opera 10.5 e Chrome, gli autori web affrontano le nuove domande : In che cosa differiscono queste implementazioni? Quali sono le tecniche CSS ? Lo sviluppatore di Firefox John Daggett ha pubblicato di recente una piccola carrellata di su questi problemi e le soluzioni alternative che sono state esplorate sono state identificate come . In risposta a questo post, e in risposta a, in particolare, al lavoro di Paul Irish, ho trovato la seguente sintassi CSS @ font-face. E 'stato testato in tutti i browser sopra menzionati inclusi IE 8, 7, e 6. Finora, tutto bene. Quella che segue è una pagina di test che dichiara il font Droid libero come una famiglia di font completa con Regular, Italic, Bold, e Grassetto Corsivo. Visualizza la fonte per i dettagli. Avviso: tenere presente che il Web leggibile ha rilasciato la sua prima utility software @ font-face per la creazione di file EOT nativamente compressi in modo rapido e semplice. Ha il proprio sito Web e, oltre all'utilità stessa, il pacchetto di download contiene una documentazione utile, un font di prova e una pagina di test EOT . Si chiama EOTFAST Se stai lavorando con @ font-face, è un must-have.

Ecco il ‘Codice Bulletproofer Mo:

@font-face{ /* for IE */ 
    font-family:FishyFont; 
    src:url(fishy.eot); 
} 
@font-face { /* for non-IE */ 
    font-family:FishyFont; 
    src:url(http://:/) format("No-IE-404"),url(fishy.ttf) format("truetype"); 
} 

Answer 3

ho letto un sacco di tutorial che suggerivano hack, così mi si avvicinò con questa soluzione penso che sia meglio ... Sembra funzionare bene.

@font-face { 
    font-family: MyFont; src: url('myfont.ttf'); 
} 
@font-face{ 
    font-family: MyFont_IE; src: url('myfont.eot'); 
} 
.my_font{ 
    font-family: MyFont, MyFont_IE, Arial, Helvetica, sans-serif; 
} 

Answer 4

Se hai ancora problemi con questo, ecco la soluzione:

http://www.fontsquirrel.com/fontface/generator

Funziona molto meglio/più veloce di qualsiasi altro font-generatore e dà anche un esempio per voi uso.

Answer 5

Font Squirrel non ha funzionato per me. Ho caricato un font per la conversione in più font per il supporto di IE. Ha eseguito onversion, che sono riuscito a scaricare. Ho quindi caricato il contenuto sul mio server per specifiche. Ero solo in grado di far funzionare Firefox o IE ma non entrambi. La soluzione che ha funzionato per me è stata il collegamento The Mo Bullet Proofer sopra.

Answer 6

Per IE> 9 è possibile utilizzare la seguente soluzione:

@font-face { 
    font-family: OpenSansRegular; 
    src: url('OpenSansRegular.ttf'), url('OpenSansRegular.eot'); 
} 

Answer 7

ho trovato se le dichiarazioni del tipo di carattere sono all'interno di una media query IE (entrambi i lati; 11) non li caricherà; Hanno bisogno di essere la prima cosa che ha dichiarato nel foglio di stile e non avvolto in una media query

Answer 8

Change come sotto

@font-face { 
    font-family: "Futura"; 
    src: url("../fonts/Futura_Medium_BT.eot"); /* IE */ 
    src: local("Futura"), url("../fonts/Futura_Medium_BT.ttf") format("truetype"); /* non-IE */ 
} 

body nav { 
    font-family: "Futura"; 
    font-size:1.2em; 
    height: 40px; 
}