CSS-свойство font-size-adjust

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

Почему важна x-высота

x-высота — это высота строчных букв (например, буквы «x»), измеренная от базовой линии. Em-высота — это полный размер шрифта. Соотношение между ними называется значением пропорции шрифта:

aspect value = x-height / em-height

Два шрифта с одинаковым font-size могут визуально заметно различаться по размеру, поскольку их значения пропорции отличаются. Например, Verdana (значение пропорции ~ 0.58) выглядит крупнее и разборчивее, чем Georgia (~ 0.52) при том же кегле. Поэтому когда резервный шрифт заменяет основной, подставленный текст может казаться слишком большим или слишком маленьким, хотя font-size не менялся.

font-size-adjust исправляет это. Когда вы задаёте ему число, браузер масштабирует используемый шрифт так, чтобы его x-высота равнялась этому числу, умноженному на текущий font-size. Визуальный размер строчных букв остаётся постоянным вне зависимости от того, какой шрифт сработает в цепочке запасных.

Практический подход: возьмите значение пропорции вашего предпочтительного (первого в списке) шрифта и передайте его в качестве значения font-size-adjust. Резервные шрифты будут подстраиваться, имитируя внешний вид предпочтительного.

Начальное значение	none
Применяется к	Всем элементам. Также применяется к ::first-letter и ::first-line.
Наследуется	Да.
Анимируется	Да.
Версия	CSS2.1
DOM Syntax	object.style.fontSizeAdjust = "0.5";

Примечание: Поддержка font-size-adjust браузерами невысока. Firefox поддерживал его до версии 118, затем удалил в версии 119 (2023), и оно никогда не было реализовано в Chrome, Safari или Edge. На практике рассчитывать на него больше нельзя. Наиболее надёжный современный подход — самостоятельно размещать шрифты (чтобы резервный срабатывал редко) и настраивать резервное начертание с помощью дескрипторов size-adjust, ascent-override и descent-override внутри правила @font-face.

Синтаксис

Синтаксис CSS-свойства font-size-adjust

font-size-adjust: number | none | initial | inherit;

Пример свойства font-size-adjust

В приведённом примере оба абзаца запрашивают шрифт, который вряд ли установлен ("Made Up Font"), и возвращаются к sans-serif. Второй абзац добавляет font-size-adjust, поэтому его резервный текст нормализуется до фиксированной x-высоты. В браузере, который ещё реализует это свойство, скорректированный абзац читается более единообразно:

<!DOCTYPE html>
<html>
  <head>
    <title>font-size-adjust example</title>
    <style>
      p {
        font-family: "Made Up Font", sans-serif;
        font-size: 20px;
      }
      .adjusted {
        font-size-adjust: 0.5;
      }
    </style>
  </head>
  <body>
    <h1>font-size-adjust</h1>
    <p>Without font-size-adjust: the fallback font keeps its own x-height.</p>
    <p class="adjusted">
      With font-size-adjust: 0.5 the fallback x-height is normalized.
    </p>
  </body>
</html>

Попробуйте сами »

Значения

Значение	Описание
none	Без корректировки размера шрифта. Это значение свойства по умолчанию.
number	Положительное число, представляющее коэффициент пропорции (x-высота, делённая на em-высоту).
initial	Устанавливает для свойства его значение по умолчанию.
inherit	Наследует свойство от родительского элемента.

Совместимость с браузерами

Браузер	Поддержка
Chrome	Не поддерживается
Firefox	1.5–118 (удалено в v119)
Safari	Не поддерживается
Edge	Не поддерживается
Opera	Не поддерживается

Практика

Какова основная функция свойства 'font-size-adjust' в CSS?

Оно управляет жирностью шрифта.Оно сохраняет x-высоту шрифта и обеспечивает её неискажённость при смене шрифта.Оно изменяет цвет шрифта.Оно обеспечивает сохранение читаемости строчных букв при смене шрифта.Оно изменяет размер шрифта по ширине viewport.

Смотрите также

CSS-свойство font-size — задаёт фактический размер текста.
CSS-свойство font-family — определяет стек шрифтов и резервные варианты.
CSS-правило @font-face — загружает пользовательские шрифты и настраивает резервные с помощью size-adjust.
Сокращённое свойство CSS font — задаёт сразу несколько свойств шрифта.