Proprietà dei font

4.1 Proprietà font-style

CSS offre anche molte proprietà per gestire i caratteri e la loro visualizzazione sulle pagine web. Le proprietà font-style, font-variant e font-stretch ti permettono di configurare lo stile del testo, la sua visualizzazione e la larghezza. Analizziamo ognuna di queste proprietà in dettaglio.

La proprietà font-style definisce lo stile del testo. Viene utilizzata per impostare un aspetto corsivo o uno stile normale del testo.

Valori:

• normal: stile normale del testo (di default)
• italic: testo inclinato (corsivo)
• oblique: testo inclinato, simile a italic, ma differisce nel modo di inclinazione

Esempio di utilizzo:

    
      .normal {
        font-style: normal;
      }

      .italic {
        font-style: italic;
      }

      .oblique {
        font-style: oblique;
      }
    
  

    
      <body>
        <p class="normal">Questo è un testo normale.</p>
        <p class="italic">Questo è un testo inclinato (corsivo).</p>
        <p class="oblique">Questo è un testo inclinato (oblique).</p>
      </body>
    
  

4.2 Proprietà font-variant

La proprietà font-variant gestisce la visualizzazione del testo in maiuscoletto. Permette di modificare il font in modo che tutte le lettere diventino maiuscole, ma con dimensione ridotta per le lettere che erano inizialmente minuscole.

Valori:

• normal: testo normale (di default)
• small-caps: testo in maiuscoletto

Esempio di utilizzo:

    
      .normal {
        font-variant: normal;
      }

      .small-caps {
        font-variant: small-caps;
      }
    
  

    
      <body>
        <p class="normal">Questo è un testo normale.</p>
        <p class="small-caps">Questo è un testo in maiuscoletto.</p>
      </body>
    
  

Valori aggiuntivi (CSS Fonts Level 4)

CSS Fonts Level 4 aggiunge valori aggiuntivi per la proprietà font-variant, come all-small-caps, petite-caps, all-petite-caps, unicase e titling-caps. Tuttavia, non sono supportati da tutti i browser.

4.3 Proprietà font-stretch

La proprietà font-stretch gestisce il grado di compressione o estensione del font. Modifica la larghezza del font senza influire sull'altezza, e viene utilizzata per selezionare la variante del font più adatta, se disponibile.

Valori:

• normal: larghezza normale del font (di default)
• ultra-condensed: font ultra-compresso
• extra-condensed: font extra-compresso
• condensed: font compresso
• semi-condensed: font semi-compresso
• semi-expanded: font semi-espanso
• expanded: font espanso
• extra-expanded: font extra-espanso
• ultra-expanded: font ultra-espanso

Esempio di utilizzo:

    
      .normal {
        font-stretch: normal;
      }

      .condensed {
        font-stretch: condensed;
      }

      .expanded {
        font-stretch: expanded;
      }
    
  

    
      <body>
        <p class="normal">Questo è un testo con larghezza del font normale.</p>
        <p class="condensed">Questo è un testo con larghezza del font compressa.</p>
        <p class="expanded">Questo è un testo con larghezza del font espansa.</p>
      </body>
    
  

1

Compito

Frontend SELF IT, livello 14, lezione 3

Bloccato

Stile del testo

Stile del testo

Apri

1

Compito

Frontend SELF IT, livello 14, lezione 3

Bloccato

Estensione del font

Estensione del font

Apri