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
serif
, senza grazie o
sans
serif
, 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.