font-optical-sizing

Шрифт Широко распространён

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с марта 2020 года.

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

Попробуйте

Синтаксис

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

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

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

Начальное значение	`auto`
Применяется к	всем элементам и тексту. Также применяется к `::first-letter` и `::first-line`.
Наследуется	да
Вычисленное значение	как указано
Тип анимации	дискретный

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

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.ttf");
  font-family: "Amstelvar";
  font-style: normal;
}

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

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

Примечание: Упомянутый выше шрифт — который включает оптическое масштабирование и имеет бесплатную лицензию — хорошо подходит для тестирования. Вы можете скачать его на GitHub.

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

Спецификация
CSS Fonts Module Level 4 # font-optical-sizing-def

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`font-optical-sizing`	79	17	62	66	13.1	79	62	57	13.4	12.0	79
`auto`	79	17	62	66	13.1	79	62	57	13.4	12.0	79
`none`	79	17	62	66	13.1	79	62	57	13.4	12.0	79

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/font-optical-sizing