В 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 | Ръб, край | Firefox | Chrome | Сафари | Опера |
|---|---|---|---|---|---|
| Не | 17+ | 62+ | 79+ | 11+ | 66+ |
| Android Chrome | Android Firefox | Браузър за Android | iOS Safari | опера мини |
|---|---|---|---|---|
| 85+ | 79+ | 81+ | 11+ | всичко |
Допълнителна информация
- Модул CSS Fonts Level 4 (Чернова на редактора)
- MDN документация
- Променливи шрифтове: Оптичен размер, персонализирани оси и други любопитни факти (Адаптивна уеб типография)