Savybė font-size-adjust

Savybė font-size-adjust leidžia kontroliuoti šrifto dydį, esant nepakitusiam font-size (padidinti arba sumažinti).

Taikymas: tarkime, font-family nurodyta du šriftai per kablelį, pavyzdžiui, Georgia, "Times New Roman". Tarkime, kad vartotojo kompiuteryje nėra Georgia šrifto - šiuo atveju bus taikomas "Times New Roman". Tačiau mūsų laukia problema - esant tokiai pačiai font-size reikšmei, šriftai atrodys skirtingai. Toliau pateiktame pavyzdyje abiems pastraipoms nustatytas font-size 16px, bet skirtingi font-family. Pažiūrėkite, kaip skiriasi dydžiai:

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>

Результат:

Taip atsitinka dėl to, kad rodomas šrifto dydis labiau priklauso ne nuo savybės font-size, kuri nustato tik bendrą šrifto dydį, o nuo savybės font-size reikšmių santykio su x-height dydžiu (x-height - tai skirtumas tarp mažosios raidės "x" ir didžiosios raidės "X" dydžio tam tikram šriftui).

Šis santykis vadinamas šrifto aspektu ir apskaičiuojamas pagal formulę: aspektas = font-size / x-height.

Dydžių problemą išsprendžia savybė font-size-adjust (ji leidžia keisti šrifto aspektą), kuri privers antrąjį šriftą atrodyti tokio pat dydžio kaip ir pirmasis.

Padarykime taip, kad Times New Roman šriftas būtų tokio pat dydžio, kaip ir Georgia. Mums žinomas Georgia aspektas - tai 0.5 (žr. lentelę žemiau).

Nustatykime font-size-adjust tekstui su Times New Roman reikšmę 0.5 ir pamatysime, kad antrasis tekstas tapo tokio pat dydžio kaip ir pirmasis:

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>

Результат:

Sintaksė

cssselektorius {
  font-size-adjust: skaičius | none;
}

Reikšmės

Numatytoji reikšmė: none.

Kaip nustatyti šrifto aspekto reikšmę?

Pažiūrėkite ištrauką iš W3C specifikacijos: Proporcingumo koeficientas (aspektas) pasirinktų šriftų gali būti apskaičiuojamas palyginus tą patį tekstą, bet su skirtinga font-size-adjust reikšme. Jei savybės reikšmė parinkta teisingai, tai esant vienodam šrifto dydžiui tekstas išliks nepakitęs visiems puslapyje naudojamiems šriftams.

Pateikiu man žinomas aspekto reikšmes kai kuriems šriftams: Georgia - 0.5, Times New Roman - 0.46, Verdana - 0.58.

Pavyzdys

Palyginkite, kaip atrodo tekstas su skirtinga font-size-adjust reikšme ir vienodu font-size ir font-family:

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>

Результат:

Pavyzdys . Taikymas realiame gyvenime

Toliau pateiktas kodas daro taip, kad jei vartotojo kompiuteryje nėra Georgia šrifto, taikomas šriftas Times New Roman būtų tokio pat dydžio kaip ir 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;
}

Результат: