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

Результат: