CSS Анимация с вариативным шрифтом

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

Некоторые из этих дополнений будут вам знакомы, а другие могут показаться свежими:

• вариативные шрифты, подробнее об этом позже в статье.

• @supports (“feature queries”) аналогичен media queries и позволяет прописать дополнительный функционал для более современных браузеров.

• gap, row-gap, и  column-gap расширяют возможности создания макетов с использованием Grid и Flexbox.

• content-visibility или «ленивая загрузка» для HTML-элементов.

•  :is и :where псевдоклассы помогут снизить повторяемость.

Хотите узнать больше?

Latest CSS features (2021 edition) 

CSS Features that you might not know about

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

Это эволюция спецификации шрифтов OpenType, которая позволяет включать несколько вариантов гарнитуры (font-family) в один файл вместо того, чтобы иметь отдельный шрифт-файл для каждого отдельного начертания (ширины, веса или курсива).

Теперь можно получить доступ ко всем вариантам, содержащимся в одном шрифт-файле, через @font-face CSS ссылку:

@font-face {
font-family: "IBM Plex Sans Roman";
src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/85648/IBMPlexSansVar-Roman.ttf");
}

Один шрифт-файл, с множеством вариаций, обеспечивает дополнительную гибкость для указания точных значений. Например, следующий синтаксис становится возможным: font-weight: 234 .

Оси вариативности

Существуют 5 зарегистрированных осей, с четырех буквенными аббревиатурами:

1. Вес (wght) 

2. Ширина (wdth)

3. Курсивность (ital)

4. Угол наклона (slnt)

5. Оптический размер (opsz)

   и настраиваемые оси, открывающие дополнительные возможности для дизайна шрифтов.

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

Доступ к зарегистрированным осям можно получить через свойство font-variation-settings, но также следует указать значение font-weight по-умолчанию чтобы обеспечить поддержку старых браузеров:

h1 {
 font-weight: 100;
 font-size: 10vw;
 font-variation-settings: "wght" 100, "wdth" 85;
}

Если вы хотите узнать о преимуществах производительности и/или анатомической структуре вариативных шрифтов, проверьте эти ссылки:

MDN variable fonts guide

Variable fonts anatomy 

Why you should use variable fonts

Анимация с вариативным шрифтом

Так как font-variation-settings охватывают диапазон значений, а не только увеличение с шагом 100, как в font-weight, начертание шрифта можно плавно анимировать:

h1 {
  font-weight: 100;
  font-size: 10vw;
  font-variation-settings: "wght" 100, "wdth" 85;
}

h1 span {
  animation: wave 4000ms infinite both;
}

В данном случае я обернула каждую букву в h1 в отдельный span и создала эффект волны с использованием задержек анимации для каждого : nth-child (). Вот как это выглядит в коде:

h1 span:nth-child(1) {
  animation-delay: var(--var-base-delay);
}

h1 span:nth-child(2) {
  animation-delay: calc(var(--var-base-delay) + 200ms);
}

h1 span:nth-child(3) {
  animation-delay: calc(var(--var-base-delay) + 400ms);
}

h1 span:nth-child(4) {
  animation-delay: calc(var(--var-base-delay) + 600ms);
}
/* etc. till the last letter */

/* variable font wave animation */ 
@keyframes wave {
  0% {
    font-variation-settings: "wght" 100, "wdth" 80;
  }
  40% {
    font-variation-settings: "wght" 200, "wdth" 85;
  }
  60% {
    font-variation-settings: "wght" 500, "wdth" 95;
  }
  80% {
    font-variation-settings: "wght" 700, "wdth" 90;
  }
  100% {
    font-variation-settings: "wght" 789, "wdth" 100;
  }
}

Немножко дизайнерской магии

Еще одна светлая сторона вариативных шрифтов заключается в том, что они предоставляют возможность дизайнерам, как Дэвид Берлоу, анимировать персонажей (в данном случае emoji):

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

Песочницы и доступные шрифты:

Existing Google Variable Font 

Font Playground

Variable Fonts

Axis Praxis