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:

html<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ő:

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

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

Értékek

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:

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

html<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elitorire
  aenean a dapibus magna, ac interdum nisl suspendisse egetile.
</p>

cssp {
  font-size: 16px;
  font-family: Georgia, "Times New Roman";
  font-size-adjust: 0.5;
}

Результат: