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

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

Свойство font-size-adjust является свойством CSS2.1.

У всех шрифтов есть «значение соотношения сторон» (aspect value), которое представляет собой отношение x-height к em-height. Это значение можно найти в документации к шрифту или вычислить с помощью онлайн-инструментов. Например, у Georgia значение соотношения составляет примерно 0.52, а у Verdana — около 0.58.

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

Примечание: font-size-adjust считается устаревшим для современной веб-разработки. Поддержка была удалена в Firefox версии 119 (2023), а в Chrome, Safari и Edge она никогда не поддерживалась. В качестве современных альтернатив рассмотрите использование font-optical-sizing или ручную настройку font-size с помощью медиазапросов.

Синтаксис

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

css

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

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

Пример использования свойства CSS font-size-adjust со значением числа

html

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document </title>
    <style>
      div.a {
        font-family: Georgia, Verdana, sans-serif;
      }
      div.b {
        font-family: Verdana, Georgia, sans-serif;
      }
      #box-one,
      #box-two {
        font-size-adjust: 0.52;
      }
    </style>
  </head>
  <body>
    <h1>Font-size-adjust property example</h1>
    <h2>Two divs with the same font-size-adjust property:</h2>
    <div id="box-one" class="a">
      This demonstrates how the primary font renders when available.
    </div>
    <div id="box-two" class="b">
      Here the fallback font takes precedence in the font stack.
    </div>
    <h2>Two divs without the font-size-adjust property:</h2>
    <div class="a">
      Without adjustment, the fallback font may appear significantly larger or smaller.
    </div>
    <div class="b">
      The font-size-adjust property ensures visual consistency across different typefaces.
    </div>
  </body>
</html>

Try it Yourself »

Значения

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

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

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

Практика

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

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

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

Синтаксис ​

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

Значения ​