Подписывайся на Telegram-канал

Вариативные шрифты

Вариативные шрифты

https://t.me/it_programmist

Дизайн сайта, как правило, включает в себя несколько начертаний одного шрифта, а зачастую и несколько разных шрифтов. И на каждый шрифт и на каждое начертание шрифта приходится грузить свой шрифтовой файл.

Вариативный шрифт - это куча начертаний в одном файле. Сколько конкретно? Бесконечно много!!!

Файл один, вариаций масса: насыщенность, пропорции, контраст, изменение размера строчных/выносных, анимация и т.п.

В спецификации OpenType Font Variations самые популярные вариации заложены в тэги из четырёх букв: насыщенность — wght, пропорция — wdth, курсив — ital, наклон — slnt и оптические размеры — opsz. Они включаются с помощью font-weight-, font-stretch- и font-style-свойств. CSS4 также обновился в соответствии с новыми значениями для поддержки OpenType Font Variations:

— font-weight — это любое целое число в диапазоне от 1 до 999 (вместо 100 в стандарте CSS3).

— font-stretch использует процент, где 100% — это нормальная пропорция, 50% — узкие начертания, а 200% — сверхширокие.

— font-style использует угол наклона между oblique –90deg и oblique 90deg.

— font-optical-sizing — новая опция, с синтаксисом либо auto, либо none,включающая ось оптических компенсаций, если она заложена в шрифте.

Шрифтовики могут использовать и свои собственные тэги — это позволяет им закладывать в шрифт бесконечную вариативность: контраст, размер строчных и выносных элементов, форму засечек, фактуры...

h1 { font-variation-settings: “wdth” 600, “wght” 200, “opsz” 48; }

Казалось бы вот оно будущее! И не надо больше тянуть кучу файлов. Получил один файл шрифта от дизайнера и радуешься жизни.

Но как всегда встает вопрос о поддержке данной технологии браузерами.

Оптимизм внушает тот факт, что разработка ведётся в том числе компаниями Apple, Google, Microsoft, Adobe. То есть в популярные браузеры, ОС, и программы, вероятно, скоро вариативные шрифты будут внедрены.

Останется только понять, насколько это быстро начнёт применяться в разработке.

Ведь разработчикам нужно понять как этим пользоваться и научится грамотно применять эту технологию. К тому же, останется поддержка старых браузеров, для которых придётся тащить шрифты по старинке.

____________________________________

Больше полезного на канале Я - программист

Общайся в чате Клуб программистов

Шутеечки и байки Дневник программиста

Ещё