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
[modifica | modifica sorgente]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
[modifica | modifica sorgente]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
[modifica | modifica sorgente]
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
[modifica | modifica sorgente]
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
[modifica | modifica sorgente]
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
[modifica | modifica sorgente]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
[modifica | modifica sorgente]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.