тк 3 июля праздник (в беларуси), буду не онлайн (по возможности буду отвечать)

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

Значения

Значение Описание
Число Число задает аспект шрифта.
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; }

: