Proprietatea font-size-adjust

Proprietatea font-size-adjust permite controlul dimensiunii fontului, la un font-size neschimbat (mărind sau micșorând).

Aplicație: să presupunem că în font-family sunt definite două fonturi separate prin virgulă, de exemplu, Georgia, "Times New Roman". Să presupunem că pe computerul utilizatorului nu există fontul Georgia - în acest caz se va aplica "Times New Roman". Cu toate acestea, ne așteaptă o problemă - la aceeași valoare a font-size fonturile vor arăta diferit. În exemplul de mai jos ambelor paragrafe li se atribuie font-size de 16px, dar diferite font-family. Observați cum diferă dimensiunile:

<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>

Acest lucru se întâmplă deoarece dimensiunea afișată a fontului depinde în mare măsură nu de proprietatea font-size, care determină doar dimensiunea generală a fontului, ci de raportul dintre valorile proprietății font-size și mărimea x-height (x-height - este diferența dintre dimensiunea literei mici "x" și a literei mari "X" pentru un anumit font).

Acest raport se numește aspectul fontului și se calculează cu formula: aspect = font-size / x-height.

Problema dimensiunilor este rezolvată de proprietatea font-size-adjust (ea permite modificarea aspectului fontului), care va forța al doilea font să arate la aceeași dimensiune ca și primul.

Să facem astfel încât fontul Times New Roman să aibă aceeași dimensiune ca și Georgia. Știm aspectul Georgia - acesta este 0.5 (vezi tabelul de mai jos).

Să setăm font-size-adjust pentru textul cu Times New Roman la valoarea 0.5 și vom vedea că al doilea text a devenit la aceeași dimensiune ca și primul:

<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>

Sintaxă

selector {
	font-size-adjust: număr | none;
}

Valori

Valoare	Descriere
`number`	Numărul specifică aspectul fontului.
`none`	Fără reglarea dimensiunii fontului.

Valoarea implicită: none.

Cum se determină valoarea aspectului pentru un font?

Consultați fragmentul din specificația W3C: Factorul de proporționalitate (aspectul) pentru fonturile selectate poate fi calculat prin compararea aceluiași text, dar cu diferite valori ale font-size-adjust. Dacă valoarea proprietății este aleasă corect, atunci la aceeași dimensiune a fontului textul va rămâne neschimbat pentru toate fonturile utilizate pe pagină.

Prezint valorile de aspect cunoscute de mine pentru unele fonturi: Georgia - 0.5, Times New Roman - 0.46, Verdana - 0.58.

Exemplu

Comparați cum arată textul cu diferite valori ale font-size-adjust și același font-size și 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>

Exemplu . Aplicație în viața reală

Codul de mai jos face astfel încât, în cazul absenței pe computerul utilizatorului a fontului Georgia, fontul aplicat Times New Roman să aibă aceeași dimensiune ca și 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;
}