Proprietà CSS font-size-adjust

La proprietà font-size-adjust preserva la leggibilità del testo quando la font-family principale non è disponibile e viene sostituita da un font di riserva. Lo fa forzando il testo visualizzato a mantenere un'x-height target indipendentemente dal font della pila effettivamente utilizzato.

Perché l'x-height è importante

L'x-height è l'altezza delle lettere minuscole (come la lettera "x"), misurata dalla linea di base. L'em-height è la dimensione intera del font. Il rapporto tra le due è chiamato valore di aspetto del font:

aspect value = x-height / em-height

Due font impostati con lo stesso font-size possono comunque apparire notevolmente diversi in termini di dimensione, poiché i loro valori di aspetto differiscono. Ad esempio, Verdana (valore di aspetto ~ 0.58) appare più grande e più leggibile di Georgia (~ 0.52) alla stessa dimensione in punti. Quindi, quando un font di riserva sostituisce il font principale, il testo sostituito può sembrare troppo grande o troppo piccolo anche se font-size non è cambiato.

font-size-adjust risolve questo problema. Quando gli si assegna un numero, il browser scala il font in uso in modo che la sua x-height sia uguale a quel numero moltiplicato per il font-size corrente. La dimensione visiva delle lettere minuscole rimane quindi costante indipendentemente dal font che vince nella catena di riserva.

Un flusso di lavoro pratico: prendere il valore di aspetto del font preferito (prima scelta) e passarlo come valore di font-size-adjust. I font di riserva vengono quindi adattati per corrispondere all'aspetto del font preferito.

Valore iniziale	none
Si applica a	Tutti gli elementi. Si applica anche a ::first-letter e ::first-line.
Ereditato	Sì.
Animabile	Sì.
Versione	CSS2.1
Sintassi DOM	object.style.fontSizeAdjust = "0.5";

Nota: Il supporto browser per font-size-adjust è scarso. Firefox lo supportava fino alla versione 118, poi lo ha rimosso nella versione 119 (2023), e non è mai stato disponibile in Chrome, Safari o Edge. In pratica non è più possibile farci affidamento. L'approccio moderno più robusto è ospitare autonomamente i propri font (in modo che il fallback si attivi raramente) e regolare il font di riserva con i descrittori size-adjust, ascent-override e descent-override all'interno di una regola @font-face.

Sintassi

Sintassi della proprietà CSS font-size-adjust

font-size-adjust: number | none | initial | inherit;

Esempio della proprietà font-size-adjust

Nell'esempio seguente, entrambi i paragrafi richiedono un font che è improbabile sia installato ("Made Up Font") e ricorrono a sans-serif come riserva. Il secondo paragrafo aggiunge font-size-adjust, quindi il suo testo di riserva viene normalizzato a un'x-height fissa. In un browser che implementa ancora la proprietà, il paragrafo adattato risulta più coerente:

<!DOCTYPE html>
<html>
  <head>
    <title>font-size-adjust example</title>
    <style>
      p {
        font-family: "Made Up Font", sans-serif;
        font-size: 20px;
      }
      .adjusted {
        font-size-adjust: 0.5;
      }
    </style>
  </head>
  <body>
    <h1>font-size-adjust</h1>
    <p>Without font-size-adjust: the fallback font keeps its own x-height.</p>
    <p class="adjusted">
      With font-size-adjust: 0.5 the fallback x-height is normalized.
    </p>
  </body>
</html>

Provalo tu stesso »

Valori

Valore	Descrizione
none	Nessuna regolazione della dimensione del font. Questo è il valore predefinito della proprietà.
number	Un numero positivo che rappresenta il rapporto di aspetto (x-height diviso per em-height).
initial	Imposta la proprietà al suo valore predefinito.
inherit	Eredita la proprietà dall'elemento genitore.

Compatibilità con i browser

Browser	Supporto
Chrome	Nessun supporto
Firefox	1.5–118 (rimosso nella v119)
Safari	Nessun supporto
Edge	Nessun supporto
Opera	Nessun supporto

Esercitazione

Pratica

Qual è la funzione principale della proprietà 'font-size-adjust' in CSS?

Controlla lo spessore del font.Preserva l'x-height di un font e garantisce che non venga distorta quando viene cambiato.Regola il colore del font.Assicura che la leggibilità delle lettere minuscole sia preservata quando il font viene cambiato.Ridimensiona il font per adattarsi alla larghezza del viewport.

Vedi anche

Proprietà CSS font-size — imposta la dimensione effettiva del testo.
Proprietà CSS font-family — definisce la pila di font e i relativi fallback.
Regola CSS @font-face — carica font personalizzati e regola i fallback con size-adjust.
Sintassi abbreviata CSS font — imposta più proprietà del font contemporaneamente.