font-size-adjusts è ora in Baseline

Rachel Andrew

La proprietà CSS font-size-adjust viene inserita in Chrome oggi stesso, ed entra a far parte di Baseline Newly Available. Questa proprietà può aiutare a prevenire variazione del layout quando vengono caricati i caratteri di riserva e assicurati leggibilità dei caratteri di riserva con dimensioni ridotte. font-size-adjust fa parte di Interop 2024, quindi questa è un'altra vittoria per lo sforzo di migliorare l'interoperabilità completamente gestita.

Il problema

Quando confronti due caratteri impostati con le stesse dimensioni, a seconda della forma e delle dimensioni dei glifi, il testo visualizzato può occupare una quantità di spazio molto diversa. Ad esempio, la seguente demo mostra testo in Verdana e Arial, entrambi impostati su 16 pixel.

La differenza di dimensioni è spiegata dal fatto che il valore aspetto, l'altezza delle lettere minuscole rispetto alle lettere maiuscole di un carattere, varia da un carattere all'altro.

Questo può causare due problemi quando viene utilizzato un carattere con un valore di aspetto diverso. come alternativa. Per prima cosa cambia la quantità di spazio occupato dal carattere. In secondo luogo, la scelta del carattere di riserva potrebbe essere meno leggibile rispetto a quella scelta. prima specificato, in particolare con caratteri di piccole dimensioni. Questo perché l'altezza relativa tra lettere minuscole e maiuscole è un fattore chiave leggibilità.

Utilità di font-size-adjust

La proprietà font-size-adjust ti consente di modificare meglio il carattere di riserva corrispondono al primo carattere. L'esempio seguente mostra i due caratteri mostrati in precedenza, questa volta il secondo carattere è stato regolato in modo che corrisponda al primo.

Questo esempio utilizza un singolo valore, un numero, che regola i caratteri utilizzando metrica dei caratteri predefinita di ex-height. Questo è il rapporto tra l'altezza della x e l'altezza della x, l'altezza di una x minuscola nel carattere. Puoi anche specificare il carattere utilizzata. Nel prossimo esempio abbiamo normalizzato i caratteri utilizzando ch-width parola chiave, oltre al numero.

Per vedere tutti i valori possibili, vedi Documentazione MDN per font-size-adjust.

Vale la pena esaminare il tuo sito utilizzando il carattere di riserva e vedere se un po' l'ottimizzazione con font-size-adjust può aiutare i lettori che usano il carattere di riserva offrono un'esperienza migliore, soprattutto ora è disponibile ovunque.