CSS3 Web fonts
Nel mio ultimo post ho analizzato l’utilizzazione di Cufon, una libreria Javascript che aiuta noi programmatori a formattare i testi usando font particolari.
Oggi vorrei, invece, presentare una breve introduzione dei Font Web con CSS3.
Come descritto tra le specifiche ufficiali di CSS3, la regola CSS @font-face ci permette di usare qualsiasi classico font sul web. Questo vantaggio ci permette di usare, potenzialmente qualsiasi tipo di carattere, e non dover più dipendere dai font “web-safe”.
La sintassi della proprietà @font-face è semplice:
@font-face { <varie_regole_css> }
dove <varie_regole_css> ha il seguente formato:
regola_css: valore; regola_css: valore; [...] regola_css: valore;
Un esempio basilare di come applicare @font-face è il seguente:
@font-face { font-family: "Helvetica Neue"; src: url(https://www.ilnostrosito.com/fonts/HelveticaNeue.ttf); } p { font-family: "Helvetica Neue", Verdana; }
Applicando le proprietà CSS dell’esempio avremo i paragrafi del nostro sito formattati in Helvetica Neue.
Discorso a parte va fatto per Internet Explorer. Il Browser di casa Microsoft riconosce la proprietà CSS @font-face, ma non i file dei font in formato TTF, OTF, ecc…
Per poter includere il file di un font per Internet Explorer è necessario convertire il file in formato EOT Embedded Open Type.
Il tool che Microsoft mette a disposizione per la creazione dei file EOT è WEFT.
Ovviamente, come possiamo immaginare, questa procedura non è il massimo per chi crede che il futuro sia negli standard.
Ciao! 🙂
Sto usando questo metodo da qualche tempo, mi trovo adesso a dover usare proprio un Helvetica Neue (in particolare HelveticaNeueLTCom-MdCn.ttf)
Il problema è che purtroppo non riesco ad ottenere risultati su explorer, ho convertito il file in eot come ho già fatto in passato ma non funziona. ipotizzando di aver sbagliato la sintassi ho cambiato temporaneamente font per fare una prova, il risultato è che funziona tutto alla perfezione anche su IE con tutti i font che ho provato tranne l’helvetica!
Potrebbe dipendere dal fatto che è un font a pagamento e che ci siano restrizioni nel codice del file? Non so più cosa pensare!
Ciao,
Non c’è alcuna restrizione nel file del font.
Ti consiglio di provar ad utilizzare quell’ottimo strumento che è Font Squirrel – http://www.fontsquirrel.com.
C’è un post, sempre sul nostro blog, che introduce Font Squirrel e che sicuramente può tornarti utile.
Ciao!
incredibile tempismo! L’ho trovato al volo prima di leggere la tua risposta, e funziona alla perfezione. Ora mi leggo l’articolo! Grazie 🙂