Свойство font-optical-sizingCSS позволяет браузеру настраивать контур глифов шрифтов, чтобы сделать их более разборчивыми при разных размерах. Например, мелкий текст может получить более толстый контур для увеличения контраста. С другой стороны, более крупный текст может получить что-то более «деликатное», чтобы процитировать спецификацию.
.element ( font-optical-sizing: none; )У глифов есть очертания?
Они делают! Фактически, они есть у всех глифов, и они масштабируются вместе с размером шрифта. Проблема в том, что сверхтонкий контур при крошечном размере шрифта может не обеспечить достаточного контраста для лучшей разборчивости; аналогично более толстые контуры при больших размерах могут иметь слишком большой вес и контраст. font-optical-sizingпытается исправить это, позволяя браузеру возиться с контуром, чтобы он лучше читался в разных масштабах. Результатом будет более четкий текст и более узкая или большая длина текста в зависимости от размера шрифта.
Это работает только со шрифтами, поддерживающими оптический размер.
А шрифты, поддерживающие оптический размер, - это вариативные шрифты , в том числе Roboto Delta, вариативная версия классического Roboto от Google. Другой вспомогательный шрифт - Amstelvar. Оба шрифта поддерживаются Type Network.
Даже если шрифт является переменным, он должен явно поддерживать оптический размер в качестве функции.
Другой способ оптического размера шрифтов
font-optical-sizingСвойство является наиболее эффективным способом оптический размером шрифта , который поддерживает его. Другой способ - использовать font-variation-settingsсвойство, которое позволяет вам управлять оптическим размером с помощью opsz, которое является ключевым словом для оптического определения размера для переменных шрифтов, которые его поддерживают.
Обратите внимание, что использование font-variation-settingsтребует, чтобы вы установили opszв соответствии с размером шрифта, чтобы все правильно масштабировалось.
.element ( font-size: 18px; font-variation-settings: 'opsz', 18; )Синтаксис
font-optical-sizing: auto | none;- Исходный:
auto - Применимо к: всем элементам
- Унаследовано: да
- Вычисленное значение: указанное ключевое слово
- Тип анимации: дискретная
Значения
auto: Это значение по умолчанию. Он позволяет браузерам оптимизировать текст с использованием шрифтов разного размера для удобства чтения.none: Это не позволяет браузерам изменять текст.
Свойство также принимает глобальные значения ключевых слов, в том числе inherit, initialи unset.
Демо
Поддержка браузера
| IE | Край | Fire Fox | Хром | Сафари | Опера |
|---|---|---|---|---|---|
| Нет | 17+ | 62+ | 79+ | 11+ | 66+ |
| Android Chrome | Android Firefox | Браузер Android | iOS Safari | опера мини |
|---|---|---|---|---|
| 85+ | 79+ | 81+ | 11+ | Все |
дальнейшее чтение
- CSS Fonts Module Level 4 (Черновик редакции)
- Документация MDN
- Изменяемые шрифты: оптический размер, настраиваемые оси и другие любопытства (адаптивная веб-типография)