Свойство CSS `font-optical-sizing`

Свойство font-optical-sizing CSS задаёт, оптимизируется ли отображение текста для просмотра при разных размерах.

Попробуйте

font-optical-sizing: auto;

font-optical-sizing: none;

<section id="default-example">
  <div id="example-element">
    <h2>Chapter 3</h2>
    <p>
      On this particular Thursday, something was moving quietly through the
      ionosphere many miles above the surface of the planet; several somethings
      in fact, several dozen huge yellow chunky slablike somethings, huge as
      office blocks, silent as birds.
    </p>
  </div>
</section>

@font-face {
  src: url("/shared-assets/fonts/variable-fonts/AmstelvarAlpha-VF.woff2");
  font-family: "Amstelvar";
  font-style: normal;
}

#example-element {
  font-family: "Amstelvar", serif;
  text-align: left;
}

#example-element h2 {
  font-size: 36px;
}

#example-element p {
  font-size: 12px;
}

Синтаксис

/* keyword values */
font-optical-sizing: none;
font-optical-sizing: auto; /* default */

/* Global values */
font-optical-sizing: inherit;
font-optical-sizing: initial;
font-optical-sizing: revert;
font-optical-sizing: revert-layer;
font-optical-sizing: unset;

Значения

Для этого свойства указывается одно из следующих ключевых слов:

none

Браузер не будет изменять форму глифов для оптимального отображения.

auto

Браузер будет изменять форму глифов для оптимального отображения.

Описание

Оптическое масштабирование включено по умолчанию для шрифтов с осью вариации оптического размера. Ось вариации оптического размера обозначается как opsz в font-variation-settings.

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

Формальное определение

Формальный синтаксис

font-optical-sizing = 
  auto |
  none

Примеры

Отключение оптического масштабирования

<p class="optical-sizing">
  This paragraph is optically sized. This is the default across browsers.
</p>

<p class="no-optical-sizing">
  This paragraph is not optically sized. You should see a difference in
  supporting browsers.
</p>

@font-face {
  src: url("AmstelvarAlpha-VF.woff2");
  font-family: "Amstelvar";
  font-style: normal;
}

p {
  font-size: 36px;
  font-family: "Amstelvar", serif;
}

.no-optical-sizing {
  font-optical-sizing: none;
}

Спецификации

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

См. также

• font-size
• font-size-adjust
• Изучите основы оформления текста и шрифтов