Sei sulla pagina 1di 8
 
 
 Autore: Bocchi Cinzia Ultimo aggiornamento: 20/10/2013
1
Proprietà dei font con i CSS
Nella tabella seguente sono indicate alcune proprietà CSS che permettono di specificare le caratteristiche dei font:
Proprietà Descrizione
font-family Definisce la famiglia di font. font-size Definisce la dimensione del font. font-style Definisce lo stile del font (es. grassetto, corsivo). font-variant Consente di visualizzare il testo in maiuscoletto. font-weight Specifica il peso del font, cioè lo spessore dei tratti che lo compongono. @font-face (CSS3) 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
 seri
, senza grazie o
 sans
 
 seri
, a spaziatura fissa o
monospaced 
.
(a) (b)
Fig. 1
 –
 Esempi di font con grazie (a) e senza grazie (b)
2
 
Un’ulteriore 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 un’elencazione esaustiva. Mi limiterò, pertanto, a
presentarvi alcune famiglie di font tra quelle più note.
1
 
2
 
 
 Autore: Bocchi Cinzia Ultimo aggiornamento: 20/10/2013
2
Fig. 2
 –
 Esempi di font monospaced e proportional
3
 
Famiglia generica Serif
Baskerville
askerville
Baskerville
Bodoni
Bodoni
Bodoni
Garamond
Garamond
Garamond
Georgia
Georgia
Georgia
Palatino
Palatino
 Palatino
 
Times New Roman
Times New Roman
Times New Roman
Fig. 3
 –
 Famiglie di font Serif
Famiglia generica Sans Serif
 Arial
Arial
 Arial
Helvetica
Helvetica
Helvetica
Lucida Sans
Lucida Sans
 
Lucida Sans
Tahoma
Tahoma
Tahoma
Trebuchet
Trebuchet
Trebuchet
Verdana
Verdana
 
Verdana
Fig. 4
 –
 Famiglie di font Sans Serif
Famiglia generica Monospaced
Consolas
Consolas
Consolas
Courier New
Courier New
Courier New 
 
Lucida Console
Lucida onsole
Lucida Console
Fig. 5
 –
 Famiglie di font Monospaced
3
 
 
 Autore: Bocchi Cinzia Ultimo aggiornamento: 20/10/2013
3
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 dall’elemento 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 dell’utente
, 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 all’url
 
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 dell’elemento genitore;
 
 larger, dimensio
ne più grande rispetto a quella del font dell’elemento genitore;
 
 lunghezza, specificata mediante numero e unità di misura;
 
valore percentuale, calcolato rispetto alla dimensione del font dell’elemento genitore;
 
 inherit.

Premia la tua curiosità

Tutto ciò che desideri leggere.
Sempre. Ovunque. Su qualsiasi dispositivo.
Nessun impegno. Annulla in qualsiasi momento.
576648e32a3d8b82ca71961b7a986505