@ font-face: come farlo funzionare su tutti i browser

La regola @ font-face è supportata in Internet Explorer 9, Firefox, Opera, Chrome e Safari.

Tuttavia, Internet Explorer 9 supporta solo tipi di carattere .eot, mentre Firefox, Chrome, Safari e Opera supportano i tipi di carattere .ttf e .otf.

Nota: Internet Explorer 8 e versioni precedenti non supportano la regola @ font-face.

Questo testo è di qui . Quindi per poter lavorare @ font-face per IE9 dovrei semplicemente specificare il file di font EOT:

@font-face { font-family: myFirstFont; src: url('Sansation_Light.ttf'), url('Sansation_Light.eot'); /* IE9 */ } 

In particolare sto usando Myriad Pro e ho i font OTF. Come posso convertirli in tipo EOT?

E riguardo a IE7 e IE8 quale trucco / trucco dovrebbe essere usato per ottenere il risultato desiderato?

In primo luogo, non hai il copyright per incorporare la maggior parte dei caratteri – chiunque può scaricarli, quindi non è diverso da mettere il font sul tuo server per qualcuno da scaricare.

Il mio consiglio sarebbe quello di utilizzare lo strumento dello scoiattolo dei caratteri qui: http://www.fontsquirrel.com/fontface/generator per generare i file e il codice per voi.

Fai attenzione a non condividere i font con i quali non hai i diritti per farlo.

Penso che questo sia quasi completamente cross-browser

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

La posizione è il percorso sul tuo server e Nome è il nome del carattere

Jacktheripper ha già pubblicato un buon font-face,

ti consiglio i seguenti buoni articoli su questo argomento:

Articolo di Paul Irish

Articolo tratto da fontspring

Personalmente, utilizzo Google Web Fonts e ne sono molto soddisfatto. Non hai problemi a convertire i font, incorporare il codice giusto e preoccuparti dei problemi di copyright con una buona varietà di font disponibili.

 @font-face { font-family: 'Awesome Font'; font-style: normal; font-weight: 400; src: local('Awesome Font'), url('/fonts/awesome.woff2') format('woff2'), url('/fonts/awesome.woff') format('woff'), url('/fonts/awesome.ttf') format('truetype'), url('/fonts/awesome.eot') format('embedded-opentype'); } 

La direttiva local () consente di fare riferimento, caricare e utilizzare font installati localmente.

La direttiva url () consente di caricare caratteri esterni e può contenere un suggerimento in formato opzionale ()