Перейти к содержанию

font-optical-sizing

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

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

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

Демо

Шрифт и Цвет

Синтаксис

1
2
3
4
5
6
7
8
/* keyword values */
font-optical-sizing: none;
font-optical-sizing: auto; /* default */

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

Значения

none

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

auto

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

Поддержка браузерами

Примеры

Пример 1

Пример 2

1
2
3
4
5
6
7
8
9
<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>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
@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;
}

Ссылки

Комментарии