Перейти к содержанию

font-size-adjust

Свойство font-size-adjust указывает, что размер шрифта должен быть выбран на основе высоты строчных букв, а не высоты заглавных букв.

Это полезно, поскольку разборчивость шрифтов, особенно при небольших размерах, определяется больше размером строчных букв, чем размером заглавных букв.

Разборчивость может стать проблемой, когда первое семейство шрифтов в свойстве font-family недоступно, а его замена имеет значительно отличающееся соотношение сторон (отношение размера строчных букв к размеру шрифта).

Шрифт и Цвет

Синтаксис

/* Use the specified font size */
font-size-adjust: none;

/* Use a font size that makes lowercase
letters half the specified font size */
font-size-adjust: 0.5;

/* Global values */
font-size-adjust: inherit;
font-size-adjust: initial;
font-size-adjust: unset;

Значения

Значение по-умолчанию: none

none
размер шрифта, основанный только на свойстве font-size.
<number>
задает отношение размера строчных букв к размеру шрифта.

Применяется к: ко всем элементам, включая ::first-letter и ::first-line.

Поддержка браузерами

Can I Use font-size-adjust? Data on support for the font-size-adjust feature across the major browsers from caniuse.com.

Пример

<p>CSS Examples: font-size-adjust</p>
<br />
<div class="times">
  This is the Times font (10px) which is hard to read in
  small sizes
</div>
<p></p>
<div class="verdana">
  This is the Verdana font (10px) which does much better,
  since it is a sans - serif font.
</div>
<br />
<p>Now we 'll do an adjustment:</p>
<p></p>
<div class="adjtimes">
  and the 10px Times, adjusted to the same aspect ratio as
  the Verdana. Cool, eh?
</div>

.times {
  font-family: Times, serif;
  font-size: 10px;
}
.verdana {
  font-family: Verdana, sans-serif;
  font-size: 10px;
}
.adjtimes {
  font-family: Times, sans-serif;
  font-size-adjust: 0.58;
  font-size: 10px;
}

Результат работы свойства font-size-adjust