Свойство font-size-adjust позволяет контролировать размер шрифта, при неизменном font-size (увеличивать или уменьшать).

Применение: пусть в font-family задано два шрифта через запятую, например, Georgia, "Times New Roman". Пусть на компьютере пользователя нет шрифта Georgia - в этом случае применится "Times New Roman". Однако, нас ждет проблема - при одинаковом значении font-size шрифты будут выглядеть по-разному. В примере ниже обоим абзацам задан font-size в 16px, но разные font-family. Посмотрите, как отличаются размеры:

font-family: Georgia
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

font-family: 'Times New Roman'
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Это происходит из-за того, что отображаемый размер шрифта зависит в большей степени не от свойства 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 и увидим, что второй текст стал такого же размера, как и первый:

font-family: Georgia
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

font-family: 'Times New Roman'; font-size-adjust: 0.5;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Синтаксис

селектор {
	font-size-adjust: число | none | inherit;
}

Значения

Значение Описание
Число Число задает аспект шрифта.
none Нет регулировки размера шрифта.
inherit Наследует значение родителя.

Значение по умолчанию: 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:

font-size: 16px; font-family: 'Times New Roman'; font-size-adjust: none;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

font-size: 16px; font-family: 'Times New Roman'; font-size-adjust: 0.5;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

font-size: 16px; font-family: 'Times New Roman'; font-size-adjust: 0.6;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

font-size: 16px; font-family: 'Times New Roman'; font-size-adjust: 0.7;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Пример . Применение в реальной жизни

Код ниже делает так, чтобы в случае отсутствия на компьютере у пользователя шрифта Georgia, применившийся шрифт Times New Roman был такого же размера, как и Georgia:

p {
	font-size: 16px;
	font-family: Georgia, "Times New Roman";
	font-size-adjust: 0.5;
}