Уласцівасць font-size-adjust

Уласцівасць font-size-adjust дазваляе кантраляваць памер шрыфту, пры нязменным font-size (павялічваць або памяншаць).

Прымяненне: хай у font-family зададзена два шрыфты праз коску, напрыклад, Georgia, "Times New Roman". Хай на камп'ютары карыстальніка няма шрыфту Georgia - у гэтым выпадку прыменіцца "Times New Roman". Аднак, нас чакае праблема - пры аднолькавым значэнні font-size шрыфты будуць выглядаць па-рознаму. У прыкладзе ніжэй абодвом абзацам зададзены font-size у 16px, але розныя font-family. Паглядзіце, як адрозніваюцца памеры:

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>

Результат:

Гэта адбываецца з-за таго, што які адлюстроўваецца памер шрыфту залежыць у большай ступені не ад уласцівасці font-size, якое вызначае толькі агульны памер шрыфту, а ад суадносін значэнняў уласцівасці font-size і велічыні x-height (x-height - гэта розніца паміж памерам малой літары "x" і вялікай літары "X" для пэўнага шрыфту).

Гэтыя суадносіны завуцца аспектам шрыфту і вылічаецца па формуле: аспект = font-size / x-height.

Праблему памераў вырашае ўласцівасць font-size-adjust (яно дазваляе мяняць аспект шрыфту), якое прымусіць выглядаць другі шрыфт такога ж памеру, як і першы.

Давайце зробім так, каб шрыфт Times New Roman быў такога ж памеру, як і Georgia. Нам вядомы аспект Georgia - гэта 0.5 (гл. табліцу ніжэй).

Усталюем font-size-adjust для тэксту з Times New Roman у значэнне 0.5 і ўбачым, што другі тэкст стаў такога ж памеру, як і першы:

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>

Результат:

Сінтаксіс

cssселектар {
  font-size-adjust: лік | none;
}

Значэнні

Значэнне па змаўчанні: none.

Як вызначыць значэнне аспекту для шрыфту?

Паглядзіце ўрывак з спецыфікацыі W3C: Каэфіцыент прапарцыянальнасці (аспект) для абраных шрыфтоў можа быць вылічаны шляхам параўнання аднаго і таго ж тэксту, але з розным значэннем font-size-adjust. Калі значэнне ўласцівасці падабрана правільна, то пры аднолькавым памеры шрыфту тэкст застанецца нязменным для ўсіх ужываных на старонцы шрыфтоў.

Прывяду вядомыя мне значэнні аспекту для некаторых шрыфтоў: Georgia - 0.5, Times New Roman - 0.46, Verdana - 0.58.

Прыклад

Параўнайце як выглядае тэкст з розным значэннем font-size-adjust і аднолькавым font-size і 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>

Результат:

Прыклад . Прымяненне ў рэальным жыцці

Код ніжэй робіць так, каб у выпадку адсутнасці на камп'ютары ў карыстальніка шрыфту Georgia, што прымяніўся шрыфт Times New Roman быў такога ж памеру, як і 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;
}

Результат: