A font-size-adjust tulajdonság

A font-size-adjust tulajdonság lehetővé teszi a betűméret szabályozását, változatlan font-size mellett (növelni vagy csökkenteni).

Alkalmazás: tegyük fel, hogy a font-family két betűtípust határoz meg vesszővel elválasztva, például Georgia, "Times New Roman". Tegyük fel, hogy a felhasználó számítógépén nincs Georgia betűtípus - ebben az esetben a "Times New Roman" fog alkalmazódni. Azonban probléma vár ránk - azonos font-size érték mellett a betűtípusok különbözőnek fognak tűnni. Az alábbi példában mindkét bekezdés font-size értéke 16px, de különböző font-family. Nézd meg, mennyire eltérőek a méretek:

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

Ez azért történik, mert a megjelenített betűméret nagyobb mértékben nem a font-size tulajdonságtól függ, amely csak a betűtípus általános méretét határozza meg, hanem a font-size tulajdonság értéke és az x-height nagysága közötti aránytól (az x-height - ez a kis "x" betű és a nagy "X" betű méretének különbsége egy adott betűtípus esetén).

Ezt az arányt a betűtípus aszpektusának nevezzük, és a következő képlettel számítjuk ki: aszpektus = font-size / x-height.

A méretproblémát megoldja a font-size-adjust tulajdonság (lehetővé teszi a betűtípus aszpektusának módosítását), amely arra kényszeríti a második betűtípust, hogy ugyanolyan méretűnek tűnjön, mint az első.

Tegyük úgy, hogy a Times New Roman betűtípus ugyanolyan méretű legyen, mint a Georgia. Ismerjük a Georgia aszpektusát - ez 0.5 (lásd az alábbi táblázatot).

Állítsuk be a font-size-adjust értékét a Times New Roman szövegére 0.5 értékre, és láthatjuk, hogy a második szöveg ugyanolyan méretű lett, mint az első:

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

Szintaxis

szelektor {
	font-size-adjust: szám | none;
}

Értékek

Érték	Leírás
`number`	Egy szám határozza meg a betűtípus aszpektusát.
`none`	Nincs betűméret-szabályozás.

Alapértelmezett érték: none.

Hogyan határozható meg a betűtípus aszpektusának értéke?

Nézd meg a W3C specifikáció egy részletét: A kiválasztott betűtípusok arányszáma (aszpektus) kiszámítható azonos szöveg összehasonlításával, de különböző font-size-adjust értékek mellett. Ha a tulajdonság értéke helyesen van beállítva, akkor azonos betűméret mellett a szöveg változatlan marad az oldalon használt összes betűtípus esetén.

Közlöm az általam ismert aszpektus értékeket néhány betűtípushoz: Georgia - 0.5, Times New Roman - 0.46, Verdana - 0.58.

Példa

Hasonlítsd össze, hogyan néz ki a szöveg különböző értékű font-size-adjust és azonos font-size és font-family mellett:

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

Példa . Alkalmazás a való életben

Az alábbi kód biztosítja, hogy abban az esetben, ha a felhasználó számítógépén nincs Georgia betűtípus, a felhasznált Times New Roman betűtípus ugyanolyan méretű legyen, mint a 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;
}