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 (Нацрт уредника)
- МДН документација
- Варијабилни фонтови: оптичка величина, прилагођене осе и друге занимљивости (прилагодљива веб типографија)