CSS/Proprietà di base/Testo avanzato

Wikibooks, manuali e libri di testo liberi.
Vai alla navigazione Vai alla ricerca
Indice del libro

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

Tipo di carattere[modifica]

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]

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]

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]

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]

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]

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]

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.