Својство 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;
}

Результат: