CSS3 Web fonts

Pubblicato il

Categoria: Web Design

LinkedIn0

web-safe-fontsNel 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.

LinkedIn0