Riprendiamo le serie di post dedicati alla gestione del testo attraverso i fogli di stile CSS. Nelle precedente guida abbiamo analizzato l’uso della proprietà font-weight per gestire l’effetto grassetto; in maniera analoga vedremo ora come utilizzare la proprietà font-style per gestire parti di testo in corsivo.
CSS, il corsivo con font-style
Al pari del grassetto la rappresentazione in corsivo nel testo fa parte degli “effetti” tipografici più comuni. In un foglio di stile CSS si utilizza a questo scopo la proprietà font-style associata al selettore su cui si desidera intervenire. Prendiamo come riferimento questo spezzone di codice:
h1 {font-style: normal;}
h2 {font-style: italic;}
p {font-style: oblique;}
Nell’esempio tre diversi selettori di HTML (H1, H2 e P) sono associati alla proprietà font-style di cui vediamo i tre principali valori:
- normal: il testo è rappresentato normalmente; in molti casi può essere omesso.
- italic: indica al browser di rappresentare il testo in corsivo utilizzando la versione “italic” del carattere.
- oblique: indica al browser di rappresentare il testo in corsivo inclinando la versione normale del carattere.
CSS, differenza tra italic ed oblique
Dalle definizioni che abbiamo dato è evidente che sia il valore italic che il valore oblique producono un effetto corsivo nel testo. Apparentemente quindi si tratterebbe di una formulazione ridondante. In realtà i valori della proprietà font-style nei fogli di stile CSS è stata pensata per tenere conto delle caratteristiche dei font usati nei computer. Il valore italic indica al browser di usare un font nella sua versione detta appunto ‘italic’ e pensata per il corsivo. Con oblique invece verrà utilizzato il font nella sua versione standard inclinata però di alcuni gradi per creare l’effetto corsivo.
Per default quando di un font non è presente una versione ‘italic’ il browser usa la versione normale applicando il valore oblique.