Continua la rubrica mensile Proprietà CSS3, contenente tutte le novità dei CSS nel Web 2.0.

La proprietà CSS3 di oggi è: @font-face, che permette di utilizzare font non standard. Fin’ora infatti mediante la proprietà css font-family si poteva specificare un carattere tra quelli standard o installati nella maggior parte dei sistemi operativi (es. verdana, tahoma, arial, serif…).

@Font-face è compatibile con tutti i browser?

La proprietà @font-face è stata introdotta già dal CSS 2.0 nel quale bastava specificare l’url del font da scaricare nel caso in cui non fosse installato già nel computer del visitatore, senza però un supporto totale da parte dei browser e perciò rimossa già dalla versione CSS 2.1. Ora che tutti i browser la supportano, la regola @font-face è stata reintrodotta nei CSS3.

A questo punto la domanda sorge spontanea: Internet Explorer come si comporta davanti a @font-face? Incredibile ma vero, tale proprietà è compatibile con IE si dalla versione 4, tuttavia non si tratta di una compatibilità cross-browser totale, infatti i caratteri più diffusi, quelli con estenzione TrueType (.ttf) non vengono considerati dal browser della Microsoft, che possiede un formato di proprietà l’Embedded OpenType (.eot) derivato dallo standard OpenType.

Supporto dei browser

Come si può fare se il font che intendiamo inserire nel nostro sito è stato rilasciato solo nel formato .ttf? Si può usare il @font-face kit generator di Font Squirrel.

Sintassi e definizione di @font-face

La regola per attivare la proprietà è molto semplice, è composta da due parametri obbligatori e due omissibili:

font-family: con cui si definisce il nome del font (necessario);
src: contenente il path del font (necessario);
font-weight: con cui si stabilisce lo spessore del carattere, predefinito “normal”;
font-style: con cui si definisce lo stile del carattere (normal, italic, oblique, inherit).

Vediamo subito come si presenta:

La sintassi della proprietà @font-face, che và innanzi tutto dichiarata e poi assegnata ad un elemento:

@font-face {
   font-family: 'LeviBrush';
   src: url('levibrush.ttf');
}
 
h1 {
   font-family: 'LeviBrush';
}

Dichiarazione di @font-face per una compatibilità totale

Come è stato accennato precedentemente nella tabella del supporto dei browser, ognuno considera un tipo diverso di estenzione, per ovviare a questa problematica si può utilizzare il servizio @font-face Kit Generator offerto da Font Squirrel.

@font-face {
    font-family: 'LeviBrushRegular';
    src: url('levibrush.eot');
    src: url('levibrush.eot?#iefix') format('eot'),
          url('levibrush.woff') format('woff'),
          url('levibrush.ttf') format('truetype'),
          url('levibrush.svg#webfont5DMjqbeH') format('svg');
    font-weight: normal;
    font-style: normal;
}
 
h1 {
   font-family: 'LeviBrushRegular';
}

Il risultato, ora dovrebbe essere visualizzato correttamente con tutti i browser: