Proprietà font-size-adjust
La proprietà font-size-adjust permette
di controllare la dimensione del carattere, mantenendo invariato
font-size
(aumentare o diminuire).
Applicazione: supponiamo che in font-family
siano impostati due caratteri separati da virgola, ad esempio,
Georgia, "Times New Roman". Supponiamo
che sul computer dell'utente non sia presente il carattere Georgia
- in questo caso verrà applicato "Times New Roman".
Tuttavia, ci aspetta un problema - con lo stesso
valore di font-size
i caratteri appariranno diversi. Nell'esempio
sotto ad entrambi i paragrafi è impostato font-size
a 16px, ma diversi font-family.
Osservate come differiscono le dimensioni:
<p style="font-size: 16px; font-family: Georgia;">
Lorem ipsum dolor sit amet.
</p>
<p style="font-size: 16px; font-family: 'Times New Roman';">
Lorem ipsum dolor sit amet.
</p>
:
Ciò accade perché la dimensione visualizzata
del carattere dipende in misura maggiore non
dalla proprietà font-size,
che determina solo la dimensione generale del carattere,
ma dal rapporto tra i valori della proprietà font-size
e la grandezza x-height (x-height
- è la differenza tra la dimensione della lettera minuscola
"x" e della lettera maiuscola "X" per un determinato
carattere).
Questo rapporto è chiamato aspetto del carattere ed è calcolato con la formula: aspetto = font-size / x-height.
Il problema delle dimensioni è risolto dalla proprietà font-size-adjust
(che permette di modificare l'aspetto del carattere), la quale
farà sì che il secondo carattere appaia della stessa
dimensione del primo.
Facciamo in modo che il carattere Times
New Roman sia della stessa dimensione, come
il Georgia. Conosciamo l'aspetto del Georgia
- è 0.5 (vedi la tabella sotto).
Impostiamo font-size-adjust per il testo
con Times New Roman al valore 0.5
e vedremo che il secondo testo è diventato della stessa
dimensione del primo:
<p style="font-size: 16px; font-family: Georgia;">
Lorem ipsum dolor sit amet.
</p>
<p style="font-size: 16px; font-family: 'Times New Roman'; font-size-adjust: 0.5;">
Lorem ipsum dolor sit amet.
</p>
:
Sintassi
selettore {
font-size-adjust: numero | none;
}
Valori
| Valore | Descrizione |
|---|---|
number |
Il numero imposta l'aspetto del carattere. |
none |
Nessuna regolazione della dimensione del carattere. |
Valore predefinito: none.
Come determinare il valore dell'aspetto per un carattere?
Leggete il brano dalla specifica W3C:
Il fattore di proporzionalità (aspetto) per
i caratteri selezionati può essere calcolato confrontando
lo stesso testo, ma con valori diversi di
font-size-adjust. Se il valore
della proprietà è impostato correttamente, allora a parità di dimensione
del carattere il testo rimarrà invariato per tutti
i caratteri utilizzati sulla pagina.
Riporto i valori di aspetto a me noti per
alcuni caratteri: Georgia - 0.5,
Times New Roman - 0.46, Verdana -
0.58.
Esempio
Confrontate come appare il testo con valori diversi di
font-size-adjust e stesso font-size
e font-family:
<p style="font-size: 16px; font-family: 'Times New Roman'; font-size-adjust: none;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p style="font-size: 16px; font-family: 'Times New Roman'; font-size-adjust: 0.5;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p style="font-size: 16px; font-family: 'Times New Roman'; font-size-adjust: 0.6;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
:
Esempio . Applicazione nella vita reale
Il codice sotto fa sì che in caso di assenza
sul computer dell'utente del carattere Georgia,
il carattere applicato Times New Roman
sia della stessa dimensione del Georgia:
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elitorire
aenean a dapibus magna, ac interdum nisl suspendisse egetile.
</p>
p {
font-size: 16px;
font-family: Georgia, "Times New Roman";
font-size-adjust: 0.5;
}
:
