# Свойство 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`. Если значение свойства подобрано верно, то при одинаковом размере шрифта текст останется неизменным для всех используемых на странице шрифтов.

Привожу известные мне значения аспекта для некоторых шрифтов: 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; }`

:

←→
↑