CSS3: utilizzare la proprietà “font-face”

CSS3: utilizzare la proprietà “font-face”

8137
15
CONDIVIDI

Oggi introduco la proprietà @font-face per l’utilizzo di font non convenzionali all’interno di pagine web. Negli articoli precedenti parlavo di sifr e cufòn, due metodi alternativi per operare con la stessa efficacia grafica la conversione di caratteri personalizzati. Chi utilizza font-face e ogni proprietà CSS3 cosi come HTML5 deve effettuare tutte le ipotesi e riflessioni del caso poiché entrambi saranno standardizzati ufficialmente dal World Wide Web Consortium non prima del 2014.

Quando non devo usare font-face?

Seguendo la premessa sopracitata font-face, così come tutte le proprietà CSS3 non devono essere utilizzate nei seguenti casi:

  • Se il sito deve rispondere alle specifiche della legge Stanca;
    • Di conseguenza se il progetto interessa:
    • Pubbliche amministrazioni;
    • Aziende private rivenditrici di servizi pubblici;
    • Aziende di trasporto e telecomunicazioni;
    • Per maggiori informazioni clicca qui.
  • Se il progetto deve essere un documento validato;
  • Se il progetto deve essere fruibile a portatori di handicap in particolare non vedenti.

Font-face e compatibilità browser

Ecco una tabella illustrativa che ci permette di capire con quali estensioni ogni browser interpreta i font dati in pasto:

Ttf Otf Svg Eot Woff Prf
Safari, Webkit
Safari Mobile da ios 4.2 da ios 4.2 da ios 4.1
Internet Explorer fino a IE 8 da IE 9
Google Chrome dalla versione 6
Opera dalla versione 10 dalla versione 10 dalla versione 10
Opera mobile dalla versione 9.7 dalla versione 9.7 dalla versione 9.7
Netscape dalla versione 4

Sintassi

La sintassi è molto semplice, come prima cosa va inizializzata la classe passandogli il nome del font e il percorso fisico:

@font-face {
   font-family: 'nome_font';
   src: url('percorso_font.ttf') format('truetype');
}

dopodiché possiamo utilizzarla:

h1{ font-family: 'nome_font', Arial, sans-serif; }

il tutto, ovviamente, va fatto all’interno del foglio di stile.

Sintassi cross browser

Come illustra la tabella delle compatibilità se vogliamo che il font personalizzato sia visibile sulla maggior parte dei browser dobbiamo avere la pazienza di includere fisicamente tutti i formati sopracitati (Ttf, Eot, Woff, e così via). La sintassi diventa la seguente:

@font-face{ 
	font-family: 'Yorkville';
	src: url('fonts/kit/yorkville-webfont.eot');
	src: url('fonts/kit/yorkville-webfont.eot?#iefix') format('embedded-opentype'),
	     url('fonts/kit/yorkville-webfont.woff') format('woff'),
	     url('fonts/kit/yorkville-webfont.ttf') format('truetype'),
	     url('fonts/kit/yorkville-webfont.svg#webfont') format('svg');
}

chiaramente se ho in possesso altri formati posso incrementare le righe di inclusione la cui sintassi è:

url('percorso_fisico') format('formato');

il risultato sarà il seguente:

Questo è un esempio di @font-face

Velocizzare le operazioni

Font Squirrel è un ottimo servizio che dato in input un font tra i formati descritti prima restituisce in output un file zip con tutti i formati necessari alla quasi totale compatibilità tra i browser risparmiandovi una fatica non indifferente.
Inoltre il servizio dispone di una lista di font free e gratuiti già convertiti e pronti per l’utilizzo.

Conclusioni

Tutto ciò che riguarda innovazione e miglioramento va recensito e discusso, ma come insegna la storia dell’informatica l’innovazione di oggi sarà un ricordo domani quando nel 2014 potrebbe già essere tutto vecchio e superato, per cui chi utilizza font-face e proprietà CSS3 deve a monte effettuare un’analisi di compatibilità e soprattutto di accessibilità…come si direbbe per un medicinale: font-face: agitare bene prima dell’uso!