CSS/Proprietà di base/Testo avanzato

In questo modulo verranno trattate le proprietà per definire il font di un testo in una pagina, che sono principalmente:

Tipo di carattere

Permette di definire il tipo di carattere usato per la visualizzazione del testo.

Sintassi:

selettore { font-family: <valore>; }

dove <valore> è una sequenza di uno o più tipi di carattere indicati tra apici nell'ordine in cui verranno usati nel caso non siano installati sul sistema operativo dell'utente. È possibile inoltre definire una famiglia generale di caratteri tramite i seguenti valori:

• serif: le serif sono le grazie, ovvero gli abbellimenti delle lettere, che presentano caratteri come il Times New Roman o il FreeSerif. È usato soprattutto per la stampa, in quanto la lettura delle grazie su schermo risulta più faticosa. Esempio: Testo con serif.
• sans-serif: sono sans-serif (senza grazie) font come il Verdana, l'Arial, il FreeSans, l'Helvetica, ecc... Sono usati prevalentemente per lo schermo. Esempio: Testo senza serif.
• cursive: i font cursive presentano caratteri più simili alla grafia umana piuttosto che a quelli di stampa. Esempio: Cursive.
• fantasy: caratteri che uniscono la visualizzazione del testo ad elementi decorativi. Esempio: Testo fantasioso.
• monospace: caratteri tipo telescrivente o macchina da scrivere e quindi monospaziati, come il Courier. Esempio: Testo monospaziato.

Ad esempio possiamo definire così il font di una pagina web:

  body { font-family: Verdana, Arial, Helvetica, sans-serif; }

Dimensione del testo

Definisce l'altezza del testo che dipenderà anche dal tipo di carattere usato. Normalmente questa proprietà è definita in em oppure in pt.

Sintassi:

 selettore { font-size: <valore>; }

Testo grassetto

La proprietà font-weight permette di definire il "peso" del testo, ad esempio se vada visualizzato in grassetto o meno.

Sintassi:

selettore { font-weight: <valore>; }

Dove valore è un valore in centinaia compreso tra 100 e 900 inclusi (900 corrisponderà ad un testo più grassetto di 100) oppure uno tra i seguenti valori:

• normal
• bold
• bolder
• lighter

che definiscono un testo normale, grassetto, grassetto pesante e più "leggero". Normalmente il valore normal corrisponde al peso numerico 500.

Testo corsivo

La proprietà font-style permette di definire un font in corsivo italico o obliquo.

Sintassi:

selettore { font-style: <valore>; }

dove valore può essere normal, italic o oblique.

Maiuscoletto

Per impostare un testo maiuscoletto si usa la proprietà font-variant.

Sintassi:

selettore { font-variant: <valore>; }

dove valore può assumere il valore normal o small-caps (maiuscoletto). Normalmente il testo maiuscoletto presenta i caratteri minuscoli come delle riduzioni dei corrispettivi caratteri maiuscoli.

La proprietà riassuntiva font

La proprietà font permette di riassumere le proprietà viste in questo modulo.

Sintassi:

selettore { font: <font-style> <font-variant> <font-weight> <font-size>/<line-height> <font-family>;}

Notare come line-height vada impostato subito dopo font-size, separato da quest'ultimo dalla barra "/".

È possibile inoltre indicare al posto dei diversi valori font, una delle seguenti famiglie usate dal sistema in uso:

• caption: il font usato per le etichette ad esempio dei pulsanti
• icon: il font usato per le etichette delle icone
• menu: il font usato nei menu
• message-box: il font usato per le finestre di dialogo
• small-caption: il font usato per le etichette dei piccoli controlli
• status-bar: il font usato per la barra di stato delle finestre

font-stretch e font-size-adjust

Nelle specifiche CSS 2 sono definite anche le proprietà font-stretch e font-size-adjust, sfortunatamente poco usate a causa della loro scarsa compatibilità con i vari browser; pertanto non ci soffermeremo su di esse in questa sede.