Le proprietà dei caratteri (font)
In questa lezione vedremo come cambiare la forma estetica dei caratteri tipografici utilizzati nelle vostre pagine web.
Fondamentalmente utilizzeremo e modificheremo queste proprietà:
- font-family
- font-style
- font-variant
- font-weight
- font-size
- font
font:
font: <size> [ / <line-height> ] | <family> | [ <style> | <variant> | <weight> ]
es: font: 12px/18px bolder italic arial;
Con font è possibile indicare in forma compatta tutte le proprietà dei caratteri con le stesse regole che trovate successivamente.
font-family:
font-family: <nome carattere> | <font generico>;
Es: font-family: Verdana, Arial, sans-serif;
Utilizzando font-family riusciremo a dare un aspetto ai caratteri utilizzati nella pagina. I browser mostreranno il primo carattere, da sinistra, tra quelli utilizzati dal sistema operativo in uso. Nell’esempio precedente stamperà i caratteri in verdana, se non installato, arial altrimenti utilizzerà il font di default per il gruppo sans-serif. Ricordate quindi di provare tutti i caratteri aggiungendone uno la volta a sinistra per controllare l’aspetto estetico avendo cura di indicare una famiglia generica alla fine. I caratteri possono esser raggruppati in due grandi categorie: grazie o serif, che hanno la caratteristica di avere dei *riccioli* di abbellimento e bastoni o sans-serif. In realtà è possibile indicare anche altre 3 famiglie di font: monospace (a spaziatura fissa), cursive e fantasy, famiglie che mi sento di sconsigliarvi ampiamente, tranne alcune eccezioni particolari.
Se il font ha un nome composto da due o più termini, ad es. Times new roman, occorre metterlo tra ".
Es: font-family: "Times new Roman", serif;
font-size:
font-size: <dimensione> | xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller
dove dimensione può essere una lunghezza, oppure una percentuale.
Larger e smaller son parametri relativi e servono ovviamente ad aumentare o diminuire la dimensione dei font rispetto all’elemento contentitore.
Approfondimenti: Dimensionamento e misure
font-style:
font-style: normal | italic | oblique;
Es: font-style: italic;
Serve a dare lo stile ai caratteri:. Sostituisce il tag html <i>. Oblique e cursive attualmente nella maggior parte dei browser son equivalenti.
font-variant:
font-variant: normal | small-caps;
Tale soluzione serve a dare l’effetto "maiuscoletto" al testo: le lettere maiuscole restano tali, quelle minuscole son riprodotte in maiuscolo ma in un corpo più piccolo.
font-weight:
font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
Es: font-weight: 700;
Con tale proprietà facciamo stampare i caratteri con peso diverso. In effetti i browser attuali distinguono tra il peso standard e il bold. Pertanto la scelta si riduce a scegliere tra normal e bold, tenendo in mente che bolder e lighter, attributi relativi possono aumentare o diminuire il peso del carattere rispetto all’elemento contenitore. Sostituisce il tag html <b>. Att: font-weight:bold ed il tag <strong> non sono equivalenti anche se possa sembrare così; font-weight agisce sull’aspetto del font, <strong> sul contenuto semantico del testo racchiuso.
Script visuale per la gestione dei caratteri.