Data di pubblicazione: 23 luglio 2024
La proprietà CSS font-size-adjust viene introdotta oggi in Chrome
e fa parte di Baseline Newly Available. Questa proprietà può contribuire a evitare lo spostamento del layout quando vengono caricati i caratteri di riserva e garantire la leggibilità dei caratteri di riserva con dimensioni più piccole. La proprietà font-size-adjust appartiene a Interop 2024, quindi si tratta di un altro risultato positivo per l'impegno volto a migliorare l'interoperabilità della piattaforma web.
Il problema
Quando confronti due caratteri impostati sulle 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 il testo in Verdana e Arial, entrambi impostati su 16 pixel.
La differenza di dimensioni è dovuta al fatto che il valore dell'aspetto, ovvero l'altezza delle lettere minuscole rispetto a quella delle lettere maiuscole in un carattere, varia da un carattere all'altro.
Ciò può causare due problemi quando viene utilizzato un carattere con un valore di aspetto diverso come valore alternativo. Innanzitutto, cambierà la quantità di spazio occupata dal carattere. In secondo luogo, il carattere di riserva scelto potrebbe essere meno leggibile di quello specificato per primo, in particolare con caratteri di piccole dimensioni. Questo perché l'altezza relativa delle lettere minuscole rispetto a quelle maiuscole è un fattore chiave per la leggibilità.
In che modo font-size-adjust è utile
La proprietà font-size-adjust ti consente di modificare il carattere di riserva in modo che corrisponda meglio al primo carattere. L'esempio seguente mostra i due caratteri mostrati
in precedenza, ma questa volta il secondo carattere è stato modificato in modo da corrispondere al primo.
font-size-adjust.Questo esempio utilizza un singolo valore, un numero, che regola i caratteri utilizzando la metrica dei caratteri predefinita ex-height. Si tratta del rapporto tra l'altezza della x, ovvero l'altezza di una x minuscola nel carattere, e le dimensioni del carattere. Puoi anche specificare la metrica del carattere utilizzata. Nell'esempio seguente, ho normalizzato i caratteri utilizzando la parola chiave ch-width, oltre al numero.
font-size-adjust con la metrica dei caratteri ch-width.Per visualizzare tutti i valori possibili, consulta la documentazione MDN per font-size-adjust.
Vale la pena esaminare il tuo sito utilizzando il carattere di riserva e vedere se un piccolo aggiustamento con font-size-adjust può aiutare i lettori che lo utilizzano a vivere un'esperienza migliore, soprattutto ora che è disponibile ovunque.