Paolo De Feo
a- a+

CSS3 font face: uso, funzionamento, compatibilità browser. Codici di esempio

Vediamo come funziona la regola @font-face, la quale consente di implementare web font diversi da quelli classici.

La regola CSS3 nota come @font-face permette ai web designer di implementare web font diversi dai classici adoperati fin d’oggi. Prima, sia il testo dei paragrafi sia qualunque elaborato che dovesse essere interpretato dai motori di ricerca necessitavano di una produzione tramite i caratteri più comuni installati su PC.

Ora, la regola CSS3 @font-face consente ai progettisti di scegliere il font tipografico preferito. Come funziona il tutto? Una volta deciso quale font implementare bisognerà includerlo all’interno del sito web: verrà “scaricato” automaticamente dall’utente quando richiesto.

Ecco un primo esempio di implementazione CSS: font-family e url sono descrittori obbligatori.

@font-face
{
font-family: family-font-esempio;
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot') format("opentype"); /* supporto Internet Explorer*/
}

Nell’esempio sopra sono stati indicati nome e percorso del font formato TrueType. Si noti anche l’inclusione del carattere formato Embedded OpenType: serve per la compatibilità con Internet Explorer, browser che supporta unicamente i font .eot. Gli altri browser, Firefox, Chrome, Safari e Opera, supportano OpenType e TrueType.

Dopo il font base, aggiungiamo un’altra regola utile a descrivere il font in grassetto:

@font-face
{
font-family: family-font-esempio;
src: url('Sansation_Bold.ttf'),
     url('Sansation_Bold.eot') format("opentype"); /* supporto Internet Explorer*/
font-weight:bold;
}



Ti potrebbe interessare anche

commenta la notizia

Ci sono 1 commenti
StefanoDettori
Spiacente ma questa soluzione non funziona con IE (nè 8 nè 7) per vari motivi:

1) IE non è in grado di interpretare 'format("opentype")' e, quando incontra questo parametro, semplicemente ignora la regola CSS e renderizza il font con il suo font-family di default.
2) IE non gradisce molto che sulla riga della sua dichiarazione 'url('Sansation_Light.eot')' compaia un'altra dichiarazione 'url('Sansation_Light.ttf')' per il semplice fatto che separarle con una virgola per lui non è sufficiente e continuerà a non comprendere l'istruzione CSS.
Meglio separarle in questo modo, utilizzando due istruzioni 'url(...)' separate per IE e per gli altri browser:

src: url('fonts/Mignone.eot') /*IE*/
src: url('fonts/Mignone.otf') /*other browsers*/

Purtroppo questo non basta per assicurare una perfetta compatibilità cross-browser.
Non mi dilungo sugli altri problemi da me riscontrati, ma una buona soluzione consiste nell'aggiungere,
nella dichiarazione per browser non-IE, l'attributo 'local', che serve a specificare un percorso locale sulla macchina del visitatore in cui andare a ricercare il font che si sta usando se si ha il dubbio che tale font possa già essere presente su tale macchina.
IE ignora questa istruzione e quindi "si fermerà" al font .eot da incorporare, mentre gli altri browser non avranno problemi ad interpretarla.

Esempio:

@font-face{font-family:Mignone
src: url('fonts/Mignone.eot') /* IE */
src: local('Mignone'), url('fonts/Mignone.otf') /* non-IE */}

Pulita, semplice, perfettamente funzionante con IE8 e IE7 (oltre ovviamente agli altri browser).