Svojstvo font-size-adjust

Svojstvo font-size-adjust omogućava kontrolu veličine fonta, pri nepromenjenom font-size (da se poveća ili smanji).

Primena: neka je u font-family zadata dva fonta preko zapete, na primer, Georgia, "Times New Roman". Neka na računaru korisnika nema fonta Georgia - u ovom slučaju primeniće se "Times New Roman". Međutim, čeka nas problem - pri istoj vrednosti font-size fontovi će izgledati različito. U primeru ispod oba pasusa imaju zadan font-size od 16px, ali različite font-family. Pogledajte kako se razlikuju veličine:

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>

Результат:

To se dešava zbog toga što prikazana veličina fonta u većoj meri ne zavisi od svojstva font-size, koje određuje samo opštu veličinu fonta, već od odnosa vrednosti svojstva font-size i vrednosti x-height (x-height - to je razlika između veličine malog slova "x" i velikog slova "X" za određeni font).

Ovaj odnos se naziva aspektom fonta i računa se po formuli: aspekt = font-size / x-height.

Problem veličine rešava svojstvo font-size-adjust (ono omogućava promenu aspekta fonta), koje će naterati da drugi font izgleda iste veličine kao i prvi.

Hajde da učinimo tako da font Times New Roman bude iste veličine kao i Georgia. Znamo aspekt Georgia - to je 0.5 (pogledajte tabelu ispod).

Postavimo font-size-adjust za tekst sa Times New Roman na vrednost 0.5 i videćemo da je drugi tekst postao iste veličine kao i prvi:

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>

Результат:

Sintaksa

cssselektor {
  font-size-adjust: broj | none;
}

Vrednosti

Podrazumevana vrednost: none.

Kako odrediti vrednost aspekta za font?

Pogledajte odlomak iz specifikacije W3C: Faktor proporcionalnosti (aspekt) za izabrane fontove može biti izračunat poređenjem istog teksta, ali sa različitom vrednošću font-size-adjust. Ako je vrednost svojstva pravilno podešena, onda pri istoj veličini fonta tekst će ostati nepromenjen za sve korišćene fontove na stranici.

Navodim meni poznate vrednosti aspekta za neke fontove: Georgia - 0.5, Times New Roman - 0.46, Verdana - 0.58.

Primer

Uporedite kako izgleda tekst sa različitom vrednošću font-size-adjust i istim font-size i 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>

Результат:

Primer . Primena u stvarnom životu

Kod ispod čini tako da u slučaju nedostatka na računaru kod korisnika fonta Georgia, primenjeni font Times New Roman da bude iste veličine kao i 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;
}

Результат: