Свойство 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;
}
Значения
| Значение | Описание |
|---|---|
| Число | Число задает аспект шрифта. |
none |
Нет регулировки размера шрифта. |
Значение по умолчанию: none.
Как определить значение аспекта для шрифта?
Посмотрите отрывок из спецификации W3C:
Коэффициент пропорциональности (аспект) для
выбранных шрифтов может быть высчитан путем
сравнения одного и того же текста, но с разным
значением font-size-adjust. Если значение
свойства 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;
}
: