# CSS/Proprietà di base/Testo avanzato

CSS
Copertina Tutti i moduli · Sviluppo
    Copertina
* Regole e sintassiCSS/Regole_e_sintassi
** SelettoriCSS/Selettori
** CascadeCSS/Cascade
** Unità di misura, ereditarietà e box modelCSS/Unità_di_misura,_ereditarietà_e_box_model
* Supporti di visualizzazione
** Media
** Media con pagine
** Fogli di stile parlati
* Proprietà di baseCSS/Proprietà_di_base
** SfondoCSS/Proprietà_di_base/Sfondo
** Testo baseCSS/Proprietà_di_base/Testo_base
** Testo avanzatoCSS/Proprietà_di_base/Testo_avanzato
** ListeCSS/Liste
** Tabelle
** Animazioni, trasformazioni, transizioni
* Disegnare la struttura della paginaCSS/Disegnare_la_struttura_della_pagina
** PosizionamentoCSS/Posizionamento
* Contenuto generatoCSS/Contenuto generato
* Altre proprietàCSS/Altre_proprietà
* CompatibilitàCSS/Compatibilità
* ReferenceCSS/Reference
Modifica il sommario
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:
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:

## 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:

## Testo grassetto

La proprietà font-weight permette di definire il "peso" del testo, ad esempio se vada visualizzato in grassetto o meno.
Sintassi:
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:
dove valore può essere normal, italic o oblique.

## Maiuscoletto

Per impostare un testo maiuscoletto si usa la proprietà font-variant.
Sintassi:
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:
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.