Свойство 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.
Вижте как се различават размерите:
<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
и виждаме, че вторият текст стана с такъв
размер, както и първия:
<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>
:
Синтаксис
селектор {
font-size-adjust: число | none;
}
Стойности
| Стойност | Описание |
|---|---|
number |
Число задава аспекта на шрифта. |
none |
Няма регулиране на размера на шрифта. |
Стойност по подразбиране: none.
Как да определим стойността на аспекта за шрифт?
Вижте откъс от спецификацията на W3C:
Коефициентът на пропорционалност (аспект) за
избрани шрифтове може да бъде изчислен чрез
сравняване на един и същи текст, но с различно
значение на font-size-adjust. Ако стойността
на свойството е подбрана правилно, то при един и същ размер
на шрифта текстът ще остане непроменен за всички
използвани на страницата шрифтове.
Привеждам известните ми стойности на аспекта за
някои шрифтове: Georgia - 0.5,
Times New Roman - 0.46, Verdana -
0.58.
Пример
Сравнете как изглежда текстът с различна стойност
на font-size-adjust и един и същ font-size
и font-family:
<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:
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elitorire
aenean a dapibus magna, ac interdum nisl suspendisse egetile.
</p>
p {
font-size: 16px;
font-family: Georgia, "Times New Roman";
font-size-adjust: 0.5;
}
: