Propriet dei font con i CSS

Nella tabella seguente sono indicate alcune propriet CSS che permettono di specificare le caratteristiche dei font: Propriet
font-family font-size font-style font-variant font-weight @font-face (CSS3)

Descrizione
Definisce la famiglia di font. Definisce la dimensione del font. Definisce lo stile del font (es. grassetto, corsivo). Consente di visualizzare il testo in maiuscoletto. Specifica il peso del font, cio lo spessore dei tratti che lo compongono. Consente di visualizzare font non standard.

Qual la differenza tra il testo e i font? Il testo il contenuto e i font si utilizzano per visualizzare quel contenuto. In tipografia e in informatica il tipo di carattere o font un insieme di caratteri tipografici caratterizzati e accomunati da un certo stile grafico o intesi per svolgere una data funzione.1 I font possono essere suddivisi in due classi o famiglie generiche: con grazie o serif, senza grazie o sans serif, a spaziatura fissa o monospaced.

(a)

(b)
2

Fig. 1 Esempi di font con grazie (a) e senza grazie (b)

Unulteriore classificazione riguarda la spaziatura tra i caratteri, che pu essere fissa o proporzionale. Nel primo caso lo spazio occupato dai caratteri costante (monospaced), nel secondo caso varia in proporzione alla dimensione del carattere ( proportional). I font di ogni classe sono ulteriormente suddivisi in famiglie. Una famiglia di font un gruppo di font concepiti per essere usati in combinazione e che mostrano similarit nel disegno. Le famiglie di font sono molto numerose e aumentano con il passare del tempo. Di conseguenza complicato fornirne unelencazione esaustiva. Mi limiter, pertanto, a presentarvi alcune famiglie di font tra quelle pi note.
1 2

Wikipedia, http://it.wikipedia.org/wiki/Tipo_di_carattere http://www.tipografialeone.net/font-caratteri-tipografia-grafica-tipi-misure-caratteristiche.html

Autore: Bocchi Cinzia Ultimo aggiornamento: 20/10/2013

Fig. 2 Esempi di font monospaced e proportional

Famiglia generica Serif

Baskerville Baskerville

Baskerville
Georgia Georgia Georgia

Bodoni Bodoni Bodoni Palatino Palatino Palatino

Fig. 3 Famiglie di font Serif

Garamond
Garamond Times New Roman Times New Roman Times New Roman

Garamond

Famiglia generica Sans Serif

Arial Arial Arial Tahoma Tahoma

Helvetica Helvetica Helvetica Trebuchet Trebuchet Trebuchet

Fig. 4 Famiglie di font Sans Serif

Lucida Sans Lucida Sans Lucida Sans Verdana Verdana Verdana

Tahoma

Famiglia generica Monospaced

Consolas Consolas Consolas

Courier New Courier New Courier New

Fig. 5 Famiglie di font Monospaced

Lucida Console Lucida Console

Lucida Console

http://en.wikipedia.org/wiki/File:Proportional-vs-monospace-v4.jpg

Autore: Bocchi Cinzia Ultimo aggiornamento: 20/10/2013

Nel seguito sono descritte nel dettaglio le propriet CSS per i font.

font-family
Definisce una famiglia di font, eventualmente generica (consigliato) da utilizzare nella visualizzazione del testo di un elemento.

selettore {font-family: font-stack;}

dove font_stack pu assumere i seguenti valori: un elenco di font separati da virgole; il nome va riportato tra apici se costituito da 2 o pi parole separate da spazi, es. Times New Roman; inherit. Il valore inherit specifica che la propriet viene ereditata dallelemento genitore. Un font stack pu comprendere anche un solo font, ma consigliabile prevederne qualcuno in pi. Infatti, nel caso il primo carattere della lista non fosse disponibile sul computer dellutente, verr utilizzato il secondo e cos via. Il font-stack dovrebbe specificare famiglie di caratteri simili, in maniera da consentire una visualizzazione di pagina simile per ogni sistema e/o browser. Le combinazioni pi usate, dette Web Safe Font Combinations, sono visibili allurl http://www.w3schools.com/cssref/css_websafe_fonts.asp.

font-size
Definisce la dimensione del font.

selettore { font-size: dimensione;}

dove dimensione pu assumere i seguenti valori: xx-small; x-small; small; medium ( il default); large; x-large; xx-large; smaller, dimensione pi piccola rispetto a quella del font dellelemento genitore; larger, dimensione pi grande rispetto a quella del font dellelemento genitore; lunghezza, specificata mediante numero e unit di misura; valore percentuale, calcolato rispetto alla dimensione del font dellelemento genitore; inherit.

Autore: Bocchi Cinzia Ultimo aggiornamento: 20/10/2013

Si veda lesempio allurl http://www.w3schools.com/cssref/playit.asp?filename=playcss_font-size&preval=xx-small La dimensione di un font pu essere assoluta, cio una misura specifica, o relativa, cio specificata relativamente al font dellelemento genitore. La dimensione assoluta non permette di modificare la dimensione del font in tutti i browser (es. le versioni di IE precedenti alla 9) e questa caratteristica da evitare per ragioni di accessibilit. Una valida alternativa per risolvere questo problema, utilizzare gli em. Unulteriore alternativa, che funziona in tutti i browser, consiste nel definire una dimensione di default per lintero documento e poi specificare la dimensione dei vari elementi contenuti nel body mediante em. La dimensione di default da inserire nel body pari al 100%: body { font-size: 100% ;}

Le unit di misura
Le unit di misura che si possono specificare con i CSS sono:
Simbolo % px in cm mm em Nome percentuale pixel inch (pollice); centimetri millimetri em Descrizione Un punto sullo schermo del computer. Equivale a 0,75 punti e circa 0,03 cm. Corrisponde a 96 pixel, 2,54 cm e circa 72 punti. Corrisponde a circa 37,9 pixel e circa 28,3 punti. 1 em uguale alla dimensione del font predefinita nel browser. Solitamente uguale a 16px, cio 12 punti. E raccomandata dal W3C. 1 ex uguale allaltezza del carattere x minuscolo del font scelto. Corrisponde circa alla met della dimensione del font. Equivale a circa 0,04 cm e circa 1,3 pixel.
Fig. 6 Unit di misura esprimibili con i CSS

ex pt

ex punti

font-style
Imposta lo stile del font.

selettore { font-style: stile;}

dove stile pu assumere i seguenti valori: normal ( il default); italic, italico (corsivo); oblique, ottenuto inclinando il font normale; simile a italic ma meno supportato; inherit.

Autore: Bocchi Cinzia Ultimo aggiornamento: 20/10/2013

 font-variant
Trasforma il testo in maiuscoletto.

selettore { font-variant: variante;}

dove variante pu assumere i seguenti valori: normal ( il default); small-caps, maiuscoletto; inherit. Si veda lesempio allurl http://www.w3schools.com/cssref/playit.asp?filename=playcss_font-variant

font-weight
Consente di applicare specifici effetti al testo, come la sottolineatura.

selettore { font-weight: peso;}

dove peso pu assumere i seguenti valori: normal ( il default); bold bolder, peso relativo rispetto al peso del genitore. lighter, peso relativo rispetto al peso del genitore. numero in {100, 200, 300, 400, 500, 600, 700, 800, 900}; 400 corrisponde a normal, mentre 700 a bold; inherit. Si veda lesempio allurl http://www.w3schools.com/cssref/playit.asp?filename=playcss_font-weight.

@font-face
La propriet @font-face in realt una @-rules (at-rules). Essa permette di utilizzare font non standard, che devono essere salvati nella directory del sito web. I font vengono automaticamente scaricati sul computer dellutente consentendo, cos, una corretta visualizzazione degli stessi. Tuttavia, non tutti i font sono visualizzabili su ciascun browser, poich ogni browser accetta solo un preciso formato di font. Tra i vari formati si distinguono: TTF (True Type); OTF (Open Type); EOT (Embedded Open Type); WOFF (Web Open Font Format).

Autore: Bocchi Cinzia Ultimo aggiornamento: 20/10/2013

Nella tabella seguente sono mostrati i principali browser e i formati supportati. Browser Chrome Firefox Safari Opera IE 9+
Fig. 7 Formati di font supportati dai browser

TTF

OTF

EOT

WOFF

IE 8 e precedenti versioni non supportano la regola @font-face. Per consentire una corretta visualizzazione sui vari browser necessario fornire sia un file TTF che un file EOT. Purtroppo, per, quando si scarica un font si ottiene solo il file TTF. Grazie a questa applicazione online http://www.kirsle.net/wizards/ttf2eot.cgi possiamo convertire il file TTF in EOT. La regola @font-face consente di definire un nome per il font e specificare il file che lo contiene, oltre ad altre propriet come lo stile, il peso e cos via.

@font-face { font-family: nome_font; src: url (nome_file ); altri_descrittori} dove nome_font il nome assegnato al font; nome_file il pathname del file del font; altri descrittori opzionali sono : - font-stretch, che definisce come deve essere allungato il font e che pu assumere uno dei seguenti valori: normal, condensed, ultra-condensed, extracondensed, semi-condensed, expanded, semi-expanded, extra-expanded, ultraexpanded; - font-style; - font-weight; - unicode-range, che definisce il range di caratteri UNICODE che il font supporta; il default U+0-10FFFF. Vi segnalo il sito Google Fonts dal quale possibile scegliere tra un consistente numero di font. Se si possiede un account Google si possono creare collezioni di font, da utilizzare quando necessario. Inoltre, non necessario scaricare alcun file ma sufficiente: copiare il codice fornito e incollarlo nella sezione <head> del file html; inserire nel CSS la regola font-family utilizzando il font_stack suggerito.

Autore: Bocchi Cinzia Ultimo aggiornamento: 20/10/2013

 Sintassi abbreviata per la propriet font

La propriet font-family permette di definire tutte le propriet del font con ununica regola.

selettore { font: stile variante peso dimensione/altezza_linea font-family;} Laltezza della linea specificata con la propriet line-height (propriet CSS del testo). La dimensione e la famiglia di font devono essere obbligatoriamente indicati. Alla propriet font possibile assegnare anche solo uno dei seguenti valori: caption, lo stesso font delle etichette dei controlli (es. pulsanti); icon, lo stesso font usato per etichettare le icone; menu, lo stesso font dei menu a discesa (drop down menu); message-box, lo stesso font usato per le finestre di dialogo; small-caption, una versione pi piccola dei font caption; status-bar, lo stesso font della barra di stato; inherit.

Riferimenti E. A. Meyer, Cascading Style Sheets - La guida completa, Hops Libri, 2007 W3schools, http://www.w3schools.com/cssref/pr_font_font.asp W3schools, http://www.w3schools.com/css/css3_fonts.asp

Quest'opera distribuita con Licenza Creative Commons Attribuzione - Non commerciale - Condividi allo stesso modo 3.0 Italia. Autore: Bocchi Cinzia Ultimo aggiornamento: 20/10/2013

Autore: Bocchi Cinzia Ultimo aggiornamento: 20/10/2013