Guida CSS, il maiuscoletto con font-variant

di Michele Costanzo Commenta

CSS maiuscoletto font-variant
Proseguiamo con questa guida ad analizzare gli aspetti della formattazione del testo attraverso i fogli di stile CSS. In particolare vedremo come sia possibile utilizzare la proprietà font-variant per applicare ad un selettore l’effetto “maiuscoletto”.

Il maiuscoletto nei CSS

Il tipografia il maiuscoletto è una particolare rappresentazione del testo usata con finalità grafiche o per migliorare la leggibilità delle parole. Nel maiuscoletto i caratteri maiuscoli sono rappresentati con la relativa lettera maiuscola mentre i caratteri minuscoli vengono rappresentati con le corrispondenti lettere maiuscole ridotte però in altezza. Nell’immagine che apre questo post è possibile osservare lo stesso testo scritto convenzionalmente ed in maiuscoletto.

L’effetto maiuscoletto è supportato da molti programmi di videoscrittura (come OpenOffice Writer) ma può essere facilmente implementato anche nei fogli di stile CSS associati ad una pagina web.

La proprietà font-variant in CSS

Come abbiamo già accennato il maiuscoletto in CSS è associato alla proprietà font-variant e si applica tipicamente ai selettori HTML che individuano elementi di testo o blocchi. Osserviamo un breve estratto di codice:

h1 {
  font-variant: small-caps;
}

La proprietà font-variant può assumere solo due valori:

  • normal: è il valore predefinito e lascia il testo nel suo aspetto normale. Può essere omesso a meno che nel contesto gerarchico del foglio di stile non occorra forzare la visualizzazione normale del testo.
  • small-caps: indica al browser di rappresentare il testo in maiuscoletto.

La maggior parte dei browser recenti gestiscono correttamente il valore small-caps della proprietà font-variant. Nei browser che non supportano questa indicazione ed in quelli che non gestiscono i fogli di stile il testo verrà rappresentato nella sua forma normale.

Lascia un commento

Il tuo indirizzo email non verrà pubblicato.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>