Фонт-оптичко-димензионисање - ЦСС-трикови

Anonim

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