font-size-adjust CSS

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

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

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

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

none

Наследуется:
Да
Применяется:

ко всем элементам, включая ::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.

Синтаксис

/* 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 — размер шрифта, основанный только на свойстве font-size.
  • <number> — задает отношение размера строчных букв к размеру шрифта.

Примеры

HTML

<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>
<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>
<div class="adjtimes"> and the 10px Times, adjusted to the same aspect ratio as the Verdana. Cool, eh?</div>

CSS

.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
Результат работы свойства font-size-adjust