Nelle precedenti guide dedicate al trattamento del testo con i fogli di stile CSS abbiamo inizialmente visto l’uso della proprietà font-family per la scelta del tipo di carattere e della proprietà font-size per fissarne le dimensioni. In questa terza guida dedicata all’argomento utilizzeremo la proprità font-weight per ottenere l’effetto ‘grassetto’ e più in generale per regolare lo ‘spessore’ dei caratteri.
CSS, la proprità font-weight
La proprietà font-weight all’interno di un foglio di stile CSS può essere utilizzato in vari modi a seconda degli obiettivi da raggiungere. Il controllo più granulare si ottiene associando a font-weight un valore numerico scelto tra 100, 200, 300, 400, 500, 600, 700, 800 e 900. Consideriamo ad esempio questo frammento di codice:
p {font-weight: 600;}
L’istruzione così costruita indica al browser che i paragrafi di testo andranno rappresentato con uno spessore dei caratteri pari a 600. Tenendo conto che il valore 400 è quello di default, un valore più alto indicherà al browser di aggiungere spessore ai caratteri ed un valore più basso di sottrarne.
L’effetto grassetto nei fogli di stile
La proprietà font-weight in un foglio di stile CSS può assumere anche valori particolari espressi attraverso parole chiave. Due sono i casi più ricorrenti in questo contesto:
normal: indica al browser di rappresentare i caratteri con uno spessore predefinito che come detto equivale al valore numerico 400:
p {font-weight: normal;}
In questo contesto la proprietà font-weight viene spesso omessa perché coincidente con il valore predefinito. Renderla esplicita torna utile ad esempio per sovrascrivere localmente una direttiva di livello superiore.
bold: indica al browser di rappresentare i caratteri del selettore con un effetto grassetto che corrisponde al valore numerico 700. Nel CSS avremo quindi un codice di questo tipo:
p {font-weight: bold;}