Proprietà CSS font-stretch
La proprietà CSS font-stretch rende il testo più stretto o più largo. Scopri tutti i valori e prova gli esempi.
La proprietà CSS font-stretch seleziona una variante più stretta o più larga del carattere corrente, permettendo di condensare o espandere il testo senza modificarne il font-size o il font-weight. È una delle proprietà CSS3.
La cosa fondamentale da capire è che font-stretch non distorce i glifi come farebbe una trasformazione. Seleziona semplicemente una variante di larghezza alternativa già inclusa nel font. Se il font-family non dispone di varianti di larghezza, la proprietà non ha effetto visibile e il testo rimane alla sua larghezza normale. Ecco perché vedrai un risultato solo con font che includono varianti condensate/espanse (ad esempio Myriad Pro, Roboto Condensed, o un font variabile con un asse wdth).
Quando usarla
Usa font-stretch quando:
- Stai utilizzando una famiglia di font che fornisce più varianti di larghezza e vuoi che il browser selezioni quella giusta (invece di importare ciascuna variante con un nome
font-familyseparato). - Stai lavorando con un font variabile che espone un asse di larghezza (
wdth) — i valori percentuali si mappano direttamente su quell'asse.
Per il testo ordinario in cui il font ha una sola larghezza, font-stretch non produce alcun effetto, quindi non fare affidamento su di essa come soluzione per adattare il testo a un contenitore.
Nota: Nell'ultima specifica CSS Fonts,
font-stretchè stato rinominato infont-width. I browser accettano ancorafont-stretchcome alias, quindi il nome della proprietà usato in questo capitolo rimane valido ovunque.
Valori
font-stretch accetta una parola chiave o una percentuale. Ogni parola chiave ha una percentuale equivalente:
| Parola chiave | Percentuale |
|---|---|
| ultra-condensed | 50% |
| extra-condensed | 62.5% |
| condensed | 75% |
| semi-condensed | 87.5% |
| normal | 100% |
| semi-expanded | 112.5% |
| expanded | 125% |
| extra-expanded | 150% |
| ultra-expanded | 200% |
Le percentuali offrono un controllo più preciso: è consentito qualsiasi valore da 50% a 200% e, su un font variabile, è possibile usare valori intermedi come 90% o 133%. I valori inferiori a 100% sono più stretti del normale; i valori superiori a 100% sono più larghi.
| Valore iniziale | normal |
|---|---|
| Si applica a | Tutti gli elementi. Si applica anche a ::first-letter e ::first-line. |
| Ereditato | No |
| Animabile | Sì. |
| Versione | CSS3 |
| Sintassi DOM | object.style.fontStretch = "expanded"; |
Sintassi
Sintassi della proprietà CSS font-stretch
font-stretch: ultra-condensed | extra-condensed | condensed | semi-condensed | normal | semi-expanded | expanded | extra-expanded | ultra-expanded | 50% | 100% | 200% | initial | inherit;Esempio della proprietà font-stretch
L'esempio seguente applica ogni parola chiave alla stessa lettera. Tieni presente che vedrai una differenza solo se il font renderizzato (Myriad Pro in questo caso, con un fallback di sistema) fornisce effettivamente quelle varianti di larghezza.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
font-size: 4em;
font-family: 'Myriad Pro', sans-serif;
}
</style>
</head>
<body>
<p>
<span style="font-stretch: ultra-condensed">A</span>
<span style="font-stretch: extra-condensed">A</span>
<span style="font-stretch: condensed">A</span>
<span style="font-stretch: semi-condensed">A</span>
<span style="font-stretch: normal">A</span>
<span style="font-stretch: semi-expanded">A</span>
<span style="font-stretch: expanded">A</span>
<span style="font-stretch: extra-expanded">A</span>
<span style="font-stretch: ultra-expanded">A</span>
</p>
</body>
</html>Utilizzo di una percentuale con un font variabile
Con un font variabile che espone un asse di larghezza puoi richiedere qualsiasi valore nell'intervallo 50%–200%, inclusi valori di larghezza intermedi:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
font-family: 'Roboto Flex', sans-serif;
font-size: 2em;
}
.narrow { font-stretch: 75%; }
.normal { font-stretch: 100%; }
.wide { font-stretch: 150%; }
</style>
</head>
<body>
<p class="narrow">Condensed text (75%)</p>
<p class="normal">Normal text (100%)</p>
<p class="wide">Expanded text (150%)</p>
</body>
</html>Come viene selezionata la variante
La variante scelta per un determinato valore di font-stretch dipende dalle varianti di larghezza effettivamente incluse nel font. Quando nessuna variante corrisponde esattamente al valore richiesto, il browser ricade sulla più vicina: i valori inferiori a 100% si mappano sulla variante più stretta più vicina, mentre i valori pari o superiori a 100% si mappano sulla variante più larga più vicina.
Descrizione dei valori
| Valore | Descrizione |
|---|---|
| ultra-condensed | Restringe il testo al massimo (50%). |
| extra-condensed | Restringe il testo in modo significativo, ma meno di ultra-condensed (62.5%). |
| condensed | Restringe il testo moderatamente, ma meno di extra-condensed (75%). |
| semi-condensed | Restringe il testo leggermente, ma meno di condensed (87.5%). |
| normal | Non viene selezionata alcuna variante alternativa. Questo è il valore predefinito (100%). |
| semi-expanded | Espande il testo leggermente più del normal (112.5%). |
| expanded | Espande il testo moderatamente più del semi-expanded (125%). |
| extra-expanded | Espande il testo significativamente più del expanded (150%). |
| ultra-expanded | Espande il testo al massimo (200%). |
| da 50% a 200% | Una percentuale che rappresenta il fattore di allargamento; inferiore a 100% è più stretto, superiore è più largo. |
| initial | Imposta la proprietà al suo valore predefinito. |
| inherit | Eredita la proprietà dall'elemento genitore. |
Proprietà correlate
- font-weight — seleziona lo spessore della variante del font.
- font-style — seleziona le varianti normale, corsivo o obliquo.
- font-variant — controlla le versioni maiuscoletto e altri glifi alternativi.
- font-family — dichiara quale font (e le sue varianti) utilizzare.
- font — la proprietà abbreviata per impostare più proprietà del font contemporaneamente.