font-optical-sizingВластивість CSS дозволяє браузеру налаштувати контур шрифту символів , щоб зробити їх більш розбірливими при різних розмірах. Наприклад, менший текст може отримати товстіший контур, щоб збільшити його контрастність. З іншого боку, більший текст може отримати щось більш “делікатне”, щоб цитувати специфікацію.
.element ( font-optical-sizing: none; )Гліфи мають обриси?
Вони роблять! Фактично вони є у всіх гліфів, і вони масштабуються відповідно до розміру шрифту. Проблема полягає в тому, що надто тонкий контур при крихітному розмірі шрифту може не забезпечити достатню контрастність для найкращої читабельності; так само товстіші обриси при більших розмірах можуть мати занадто велику вагу та контраст. font-optical-sizingнамагається виправити це, дозволяючи браузеру возитися з контуром, щоб він краще читався в різних масштабах. Результатом буде чіткіший текст або вужча або ширша довжина тексту залежно від розміру шрифту.
Це працює лише на шрифтах, які підтримують оптичний розмір
А шрифти, які підтримують оптичний розмір, є змінними шрифтами , включаючи Roboto Delta, змінну версію класичного Google Roboto. Ще одним допоміжним шрифтом є 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 | Край | Firefox | Chrome | Сафарі | Опера |
|---|---|---|---|---|---|
| Ні | 17+ | 62+ | 79+ | 11+ | 66+ |
| Android Chrome | Android Firefox | Браузер Android | iOS Safari | Opera Mini |
|---|---|---|---|---|
| 85+ | 79+ | 81+ | 11+ | Всі |
Подальше читання
- Модуль шрифтів CSS рівень 4 (проект редактора)
- Документація MDN
- Змінні шрифти: оптичний розмір, власні осі та інші цікавинки (адаптивна веб-типографія)