blog

CSS3 @font-face: compatibilità cross-browser

mercoledì 6 Aprile 2011

CSS3 @Font-face

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

tabella @font-face

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:

@face-font

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:

@face-font

Categorie: CSS
Tag:

5 Commenti

  1. Alessandro Alessio

    6 Aprile 2011, 15:34

    Ciao Simone,
    ottimo articolo il problema è che attualmente non è possibile creare il proprio font face kit su font-squirrel. A te funziona? Io non riesco più a fare l’upload, da un errore di javascript (relativo penso a jquery)

  2. Simone Forti

    6 Aprile 2011, 17:31

    Ciao Alessandro, a me personalmente funziona, ho appena provato.
    Hai provato a cambiare browser o font?

  3. Marco

    17 Luglio 2011, 19:49

    Ciao a tutti io non ci salto fuori ie non mi funziona… le ho provate tutte… ma 0 non mi funziona!

  4. Simone Forti

    17 Luglio 2011, 21:05

    Hai dato un’occhiata alla tabella relativa al supporto della compatibilità dei formati di font. Per IE solo i font con formato EOT sono compatibili.

  5. Piero

    12 Febbraio 2013, 11:04

    Continuerò a usre Arial.

    Darei volentieri fuoco alla Microsoft, ma ha di seri problemi di compatibilità con l’accendino.

Scrivi un commento

© 2010-2022 SimoneDesign.it    C.F. FRTSMN87P18F844X    P.I 01478670555  -  Licenza Creative Commons