Главная » Хабрахабр » [Перевод — recovery mode ] Вариативные веб шрифты

[Перевод — recovery mode ] Вариативные веб шрифты

Я думаю это будет ряд статеек на интересные мне темы, надеюсь, как и вам. Прошла уже не одна неделя с You Gotta Love Frontend конференции, но еще не поздно пройтись по нескольким поднятым вопросам. Учитывая, что это был первый раз когда я услышал о вариативных шрифтах, о трюках говорить пока рано 🙂 Данный пост это перевод на статьи о вариативных шрифтов, используя которые Lea Verou показывала ряд трюков в цикле своих выступлений "Cекреты CSS".

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

В оригинальной статье используется 18 разных стилей шрифта и все это в одном файле шрифта размером в 57 KB. В качестве примера, в тексте (на картинках) используется Output Sans Variable вариантивный шрифт который может быть настроен по двум осям (вес и скос). К концу года вариативные шрифты будут поддерживаться всеми основными браузерами и в начале 2019 году, мы будем использовать такие шрифты как альтернативу статическим шрифтам. По факту, вариативные шрифты это новая хайповая фича для каждого любителя типографии со времен web fonts. они работают, и что вы можете с ними сделать?

Введение

Один вариативный шрифт хранится в одном файле, но способен заменить собою множество различных шрифтов хранящихся в разных файлах. В рамках своего исследования, я нашел самое простое пояснение вариативным шрифтам. С OpenType вариативным файлом шрифта, вы можете сгенерировать множество разных вариации шрифта причем любой градации (granular, например weight = 100 или 101 и так далее). Традиционно под каждый вес (жирность) или стиль (italic, bold, light) шрифта вам надо загрузить несколько соответствующих шрифтов, файлов.

Данный пример демонстрирует две оси — ширину и вес. Вариативные шрифты могут иметь больше осей.

Точки которые формируют контур, имеют ряд инструкций, которые определяют их поведение и формирование того или иного стиля. Малый размер файла достигается за счет того, что каждый символ имеет только один контур. В сентябре 2016 года, OpenType Font Variations были публично анонсированы и разработаны совместными усилиями Adobe, Apple, Google, and Microsoft. Интерполяция происходит динамически прямо в браузере. Очевидно, что такая кооперация придала вариативным шрифтам некий толчок на быструю реализацию.

Возможности

Дизайнерам доступны те или иные оси для манипуляции шрифтом. Это всегда зависит от шрифта. На данный момент существует 5 зарезервированных осей которые могут быть динамически изменены: wdth — ширина, wght — вес, ital — курсив, slnt — скос, opsz — оптический размер.

Но так же могут быть какие-либо кастомные оси. Большинство шрифтов предоставляют оси веса и ширины, похоже они наиболее популярны. Например serifs (засечки) или свойства нижнего и верхнего регистра.

Действительно ли нам необходимо так много разных стилей?

Типографика придает словам смысл посредством дизайна, что означает хорошая типография может поддерживать контент, плохая (или неуместная) типография — портить. Давайте остановимся и спросим себя, зачем нам нужны разные стили шрифта? Например жирный текст, выделяет, что-то важное. Текст может быть отформатирован различными стилями того же шрифта. Разумеется можно например использовать цвет, но это совсем другая история. А что-то важное, не будет выделятся, если шрифт монотонный и все выглядит одинаково. Одаренные дизайнеры любят БОЛЬШОЙ И ЖИРНЫЙ ТЕКСТ красного цвета на билбордах.

Разумеется, что различные стили так же применяются к заголовкам, цитатам, и прочим артефактам в тексте, а не только к выделению слов.

Пример использования кастомных осей:

Как использовать вариативные шрифты?

Найдите доступный вариативный шрифт

Тут вы сможете найти кучу различны вариативных шрифтов, поиграться с ними и скачать. Данная технология достаточно нова, по этому перед тем как начать использовать вариативные шрифты, вам необходимо сначала найти их 🙂 Отличным местом для поиска является v-fonts.com. Так же список шрифтов можно найти тут

Интегрируйте шрифты в ваши стили

Все последние браузеры в принципе поддерживают вариативные шрифты. Поддержка браузерами уже достаточно хороша, около 65%. Firefox поддерживает за флагом.

Делаете вы это используя '@font-face' Интеграция вариативного шрифта в целом очень проста.

@font-face {
font-family: 'Venn';
src: url('Venn.woff2') format('woff2-variations'),
/* will be the standard and works in Safari now */
url('Venn.woff2') format('woff2');
/* for the other supporting browsers */
}

Узнайте какие оси поддерживает шрифт

Если вы не знаете возможностей своего шрифта, вы можете использовать замечательный тул от Roel Nieskens. У каждого шрифта может быть свой набор поддерживаемых осей. Там же вы сможете скопировать сгенеренный CSS стиля для шрифта и использовать его в своем проекте. Просто перетяните туда свой шрифт.

Стилизация вариативного шрифта

  • font-weight — вес, принимает только от 1 до 999.
  • font-stretch — растяжение, принимает процент. 100% — дефолт, 50% сжатый, 200% сильно растянутый. Название не очень очевидно, ведь по факту это ширина.
  • font-style — стиль, принимает наклон, от -90 до 90. Так же font-style: italic по-прежнему будет работать. К слову, большинство шрифтов как правило реализуют наклон до 8 градусов.
  • font-optical-sizing — новое свойство, которое принимает auto или none. По умолчанию браузеры будут ставить свойство в auto.

Не все шрифты будут поддерживать эти свойства, и не все браузеры поддерживают их на данный момент.

Так же вы можете изменять низкоуровневые свойства с помощью font-variation-settings, например:

p {
font-family: "Venn"; font-variation-settings: "wght" 550, "wdth" 125;
}

Того же самого эффекта вы можете достичь с помощью:

p {
font-family: "Venn";
font-weight: 550;
font-stretch: 125%;
}

И разумеется шрифт может поддерживать какие-либо кастомные свойства, доступ к которым вы будете иметь через тот же font-variation-*:

h1 {
font-family: 'Decovar Alpha VF', sans-serif;
font-variation-settings: "TRMC" 0, "SKLA" 0, "SKLB" 0, "TRME" 0;
}

Полезные ссылки:

C. П. Если вы заметили какие-либо косяки или не точности, пишите мне в ЛС. Я достаточно давно не занимался переводом, думаю это дело практики. Комментарии оставим, для комментирования

upd: Спасибо @gt8on, поправил пару ссылочек
upd: Спасибо MissisRol, поправил перевод 🙂


Оставить комментарий

Ваш email нигде не будет показан
Обязательные для заполнения поля помечены *

*

x

Ещё Hi-Tech Интересное!

[Перевод] Ленивая загрузка изображений с использованием IntersectionObserver

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

Два скилла, которые помогут стать отличным разработчиком

В новом своем материале он решил рассказать, какие навыки помогают разработчику в его ежедневном труде. От переводчика: эта статья — перевод оригинальной статьи Бара Франека, специалиста по JavaScript. Но речь не о программных инструментах, а, скорее, ментальных. Без разницы, какую ...