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(http://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.
