font-optical-sizingЦСС имовине омогућава бровсер-у да подесите контуре фонт глифова да их више читљив у различитим величинама. На пример, мањи текст може добити дебљи обрис како би се повећао његов контраст. Са друге стране, већи текст може добити нешто „деликатније“ у наводу спецификације.
.element ( font-optical-sizing: none; )Глифи имају обрисе?
Раде! Заправо их имају сви глифи и они се прилагођавају величини фонта. Проблем је у томе што изузетно танак обрис мале величине фонта можда неће пружити довољан контраст за најбољу читљивост; слично томе, дебљи обриси код већих величина могу имати превише тежине и контраста. font-optical-sizingпокушава то исправити допуштајући прегледачу да се брчка по обрисима како би боље читао у различитим размерама. Резултат ће бити оштрији текст и ужа или шира дужина текста у зависности од величине фонта.
Ово ради само на фонтовима који подржавају оптичко одређивање величине
А фонтови који подржавају оптичко величину су променљиви фонтови , укључујући Робото Делта, променљиву верзију Гоогле-овог класичног Робота. Други подржавајући фонт је Амстелвар. Оба фонта одржава Типе Нетворк.
Чак и ако је фонт променљив, он мора изричито подржати оптичко величину као карактеристику.
Други начин за величину фонтова
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.
Демо
Подршка прегледача
| ИЕ | Ивица | Фирефок | Хром | Сафари | Опера |
|---|---|---|---|---|---|
| Не | 17+ | 62+ | 79+ | 11+ | 66+ |
| Андроид Цхроме | Андроид Фирефок | Андроид претраживач | иОС Сафари | опера мини |
|---|---|---|---|---|
| 85+ | 79+ | 81+ | 11+ | Све |
Додатна литература
- Модул ЦСС фонтова ниво 4 (Нацрт уредника)
- МДН документација
- Варијабилни фонтови: оптичка величина, прилагођене осе и друге занимљивости (прилагодљива веб типографија)