font-size-adjust

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

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

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

Шрифт и Цвет

• @font-face

• font
• font-family
• font-feature-settings
• font-kerning
• font-language-override
• font-optical-sizing
• font-size
• font-size-adjust
• font-stretch
• font-style
• font-synthesis
• font-variant
• font-variant-alternates
• font-variant-caps
• font-variant-east-asian
• font-variant-ligatures
• font-variant-numeric
• font-variant-position
• font-variation-settings
• font-weight
• line-height

• color
• opacity
• print-color-adjust

Синтаксис

/* 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;

/* Two values - added in the Level 5 spec */
font-size-adjust: ex-height 0.5;

/* Global values */
font-size-adjust: inherit;
font-size-adjust: initial;
font-size-adjust: revert;
font-size-adjust: revert-layer;
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.

Пример

HTMLCSSРезультат

<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;
}

Комментарии