Grazie all’uso dei fogli di stile abbiamo la possiblilità di definire molte proprietà del testo, tra cui tipo di carattere, spaziatura tra lettere e parole, colori, dimensione, ecc…

font-family

E’ una proprietà ereditata e serve ad impostare il tipo di carattere che si desidera usare per il testo. La sua sintassi permette di impostare un elenco di caratteri seguiti da una famiglia generica e non un singolo font. In questo modo il browser cercherà di caricare il primo font, nel caso in cui questo font non fosse presente sulla macchina del cliente, passerà al secondo e così via, per poi arrivare alla famiglia generica. Le famiglie di caratteri sono cinque: serif, sans-serif, cursive, fantasy, monospace.

p{font-family: "Times New Roman", Times, serif;}

Nell’esempio precedente, il browser cercherà di caricare il font “Times New Roman”, nel caso in cui tale font non sia presente cercherà di caricare il font “Times” e, nel caso in cui nemmeno quest’ultimo fosse presente, caricherà il primo font della famiglia “serif”. Come avrete notato, solo i font, il cui nome è composto da più parole, devono essere racchiusi tra doppi apici.

font-size

Questa proprietà serve ad impostare le dimensioni dei caratteri ed è ereditata. I valori possono essere espressi in vari modi assoluti o relativi, il modo migliore però, è quello di definire le dimensioni in pixel.

I valori assoluti sono:

• le parole chiave xx-small, x-smal, small, medium, large, x-large, xx-large
• le unità di misura pt e px, tutte le altre unità sono poco raccomandabili per il testo.

I valori relativi invece sono:

• quelli che vengono espressi in percentuale (%) o in em-height (em)
• e le due parole chiave smaller e larger

font-style

Serve ad definire alcune caratteristiche del testo ed è una proprietà ereditata. I valori ammessi sono tre:

• normal: valore di default
• italic: testo in corsivo
• oblique: testo in corsivo

p{font-family: "Times New Roman", Times, serif; font-style:italic;}

text-align

Questa proprietà serve ad gestire l’allineamento del testo, ed è una proprietà ereditata, i valori ammessi sono:

• left: testo a sinistra
• center: testo centrato
• justify: testo giustificato
• right: testo a destra

p{text-align:left;}

font-weight

Serve per impostare al testo lo stile “grassetto”, è una proprietà ereditata e sono ammessi diversi valori:

• i valori numerici 100, 200, 300, 400, 500, 600, 700, 800, 900 (il valore 100 è il più leggero ed il valore 900 è il più pesante).
• le parole chiave bold (testo in grassetto, equivalente a 700) e normal (valore di default).

Inoltre è possibile usare due valori relativi che determinano se il testo deve apparire più o meno marcato rispetto al testo presente: lighter e bolder.

line-height

Tale proprietà serve a definire l’altezza della riga di teso, all’interno di un blocco, e come le altre è una proprietà ereditata, i valori ammessi sono:

• normal: valore di default
• unità di misura
• percentuale: che varia in base al tipo di carattere usato (poco raccomandato)
• valore numerico: un valore che verrà moltiplicato per la dimensione del font, ad esempio 1.3, 1.5, ecc…

font

E’ una proprieta che ingloba in essa tutte le altre proprietà, i valori delle singole proprietà, (come abbiamo già visto per la proprietà background), vanno separati da uno spazio vuoto tranne che per le proprietà font-size e line-height che vanno separate da uno slash:

p{font:normal 13px/1.4 "Times New Roman", Times, serif}

inoltre nella dichiarazione di questa proprietà abbiamo la possibilità di specificare altri caratteri che sono quelli usati nel nostro sistema operativo:

• icon: carattere usato per le icone
• menu: carattere usato per i menu
• caption: carattere usato per i pulsanti e per i menù a tendina
• small-caption: carattere dei controlli più piccoli
• status-bar: carattere usato per la barra di stato
• message-box: carattere usato per le finestre  con messsaggi di sistema.

p{font:menu;}