Sintassi

Significato dei valori principali:

• normal: valore predefinito. Usa la larghezza standard del font.

• ultra-condensed: variante del font molto compressa orizzontalmente.

• extra-condensed: variante molto compressa, ma meno di ultra-condensed.

• condensed: font leggermente più stretto del normale.

• semi-condensed: moderatamente più stretto.

• semi-expanded: leggermente più largo del normale.

• expanded: più largo del normale.

• extra-expanded: molto più largo.

• ultra-expanded: la variante più larga disponibile del font.

Note: Deprecato:

• font-stretch è ancora supportato dalla maggior parte dei browser moderni.

• È considerato deprecato e potrebbe essere rimosso in futuro dagli standard.

• È stato sostituito dalla proprietà font-width nelle nuove specifiche CSS.

• font-width potrebbe non essere ancora pienamente supportato nei browser attuali.

• Si consiglia di evitare l'uso di font-stretch in nuovo codice e valutare alternative per garantire compatibilità futura.

Esempio proprietà: font-stretch

Codice Esempio: font-stretch

CODE: CSS

1. .stretch-normal {

2.   font-family: "Arial", sans-serif;

3.   font-size: 24px;

4.   font-stretch: normal;

5. }

7. .stretch-expanded {

8.   font-family: "Arial", sans-serif;

9.   font-size: 24px;

10.   font-stretch: expanded;

11. }

13. .stretch-condensed {

14.   font-family: "Arial", sans-serif;

15.   font-size: 24px;

16.   font-stretch: condensed;

17. }

Contenuto Esempio: font-stretch

  
  <style>
    .stretch-normal {
      font-family: "Arial", sans-serif;
      font-size: 24px;
      font-stretch: normal;
    }

    .stretch-expanded {
      font-family: "Arial", sans-serif;
      font-size: 24px;
      font-stretch: expanded;
    }

    .stretch-condensed {
      font-family: "Arial", sans-serif;
      font-size: 24px;
      font-stretch: condensed;
    }
  </style>

  <div class="stretch-normal">Testo con font-stretch: normal</div>
  <div class="stretch-expanded">Testo con font-stretch: expanded</div>
  <div class="stretch-condensed">Testo con font-stretch: condensed</div>
  

Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.

Supporto Browser