Использование переменных шрифтов CSS в сети  

Шрифты – это новый набор функций, которые определены как часть спецификации OpenType. Благодаря этому файлы шрифтов могут содержать несколько вариантов шрифта – это называется переменный шрифт. Это, в свою очередь, позволяет использовать в Интернете один файл шрифта, который может содержать несколько стилей шрифтов.

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

В этом мануале мы рассмотрим несколько примеров использования переменного шрифта, а затем разберемся, как использовать такие шрифты в Интернете.

Примеры переменных шрифтов

Обратите внимание, для правильного отображения приведенных ниже примеров вам потребуется поддерживающий их браузер.

Шрифт source-sans

Source Sans – популярный бесплатный шрифт, который теперь доступен в переменной версии. Посмотреть, как он работает, можно здесь (наведите курсор на текст, чтобы увидеть, как меняется значение font-weight).

Это достигается с помощью очень простых правил CSS:

@font-face {
font-family: 'Source Sans';
src: url('/assets/fonts/variable/SourceSansVariable-Roman.ttf') format("truetype-variations");
font-weight: 1 999;
}
.source-sans, .source-sans2, .source-sans3 {
font-family: 'Source Sans';
transition: font-weight .45s ease-out;
}
.source-sans:hover, .source-sans2:hover {
font-weight: 999;
}
.source-sans3:hover {
font-weight: 200;
}

Пользовательские стили шрифтов

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

Вот правила CSS, используемые для создания такого шрифта:

@font-face {
font-family: Decovar;
src: url('/assets/fonts/variable/DecovarAlpha-VF.subset.ttf') format("truetype-variations");
}
.decovar, .decovar2, .decovar3 {
font-family: Decovar;
}
.decovar {
color: var(--green3);
font-variation-settings: "BLDA" 506.944, "TRMC" 1000, "TRMK" 324.653;
}
.decovar2 {
color: hotpink;
font-variation-settings: "WMX2" 580.838, "TRMB" 1000;
}
.decovar3 {
color: rebeccapurple;
font-variation-settings: "TRMF" 159.18, "TRME" 1000;
}

А вот HTML код который применяет эти правила стиля.

<div class="decovar">
Well hello there Alligator
</div>
<div class="decovar2">
How are you doing
</div>
<div class="decovar3">
Very well, thank you
</div>

Теперь, когда вы ознакомились с некоторыми реальными примерами, давайте рассмотрим основные понятия и способы применения переменных шрифтов на вашем сайте.

Оси шрифта

Переменные шрифты определяют свои параметры по осям изменений. Существует 5 стандартных осей:

  • ital: настраивает курсив. Это значение можно установить с помощью CSS свойства font-style.
  • opsz: управляет оптическим размером шрифта. Значение можно установить с помощью CSS-свойства font-optical-sizing.
  • slnt: управляет наклоном шрифта. Значение можно установить с помощью CSS свойства font-style.
  • wght: определяет толщину шрифта. Значение можно установить с помощью CSS-свойства font-weight.
  • wdth: определяет ширину шрифта. Значение можно установить с помощью CSS-свойства font-stretch.

Шрифты также могут применять пользовательские оси. Имя пользовательской оси должно состоять из 4 букв в верхнем регистре, а имена стандартных осей состоят из 4 букв в нижнем регистре. Приведенный выше шрифт Decovar является ярким примером шрифта, использующего множество пользовательских осей.

Стандартные оси можно установить с помощью хорошо известных вам свойств CSS (например, wdth задается с помощью font-weight), в противном случае для управления значениями осей используются новые настройки CSS font-variation-settings.

Например, здесь мы определяем стиль для переменного шрифта NobotoFlex:

h1 {
font-variation-settings: "BASE" 500, "SPAC" 200, "wght" 322, "HEIG" 456;
}

А вот альтернативный способ записать то же самое:

h1 {
font-weight: 322
font-variation-settings: "BASE" 500, "SPAC" 200, "HEIG" 456;
}

Рекомендуется использовать собственные CSS свойства для осей, у которых они есть.

Примечание: В шрифтах не обязательно использовать все 5 стандартных осей. Рекомендуем обратиться к документации шрифта, чтобы узнать, какие оси можно устанавливать. Обратите также внимание на то, что font-weight может принимать значения от 1 до 999 (в отличие от других свойств, которые принимают значения в привычном диапазоне 1-100).

Использование переменных шрифтов с помощью @font-face

Использовать переменные шрифты в сети можно через определение правил @font-face, указывающих на файлы переменных шрифтов. Ниже мы кратко продемонстрируем, как это делается.

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

В этом примере мы определяем две версии семейства шрифтов Source Sans, одну обычную и одну жирную. Обе версии используют один и тот же файл переменных шрифтов, но разные файлы шрифтов в качестве альтернативы для тех браузеров, которые не поддерживают переменные шрифты:

@font-face {
font-family: 'Source Sans';
src: url('/path/to/SourceSansVariable.woff2') format("woff2-variations");
src: url('/path/to/SourceSans.woff2') format("woff2");
font-weight: 400;
}
@font-face {
font-family: 'Source Sans';
src: url('/path/to/SourceSansVariable.woff2') format("woff2-variations");
src: url('/path/to/SourceSansBold.woff2') format("woff2");
font-weight: 900;
}

В правилах CSS эти шрифты можно записать обычным способом.

h1 {
font-family: 'Source Sans';
font-weight: 900;
}
h2 {
font-family: 'Source Sans';
font-weight: 400;
}

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

@font-face {
font-family: 'Source Sans';
src: url('/path/to/SourceSansVariable.woff2') format("woff2-variations");
src: url('/path/to/SourceSans.woff2') format("woff2");
font-weight: 1 999;
}

С учетом вышеизложенного, вы можете использовать для свойства font-weight любое значение от 1 до 999. Не поддерживающие браузеры будут использовать значение шрифта normal.

Доступные шрифты

Найти большинство доступных в настоящее время переменных шрифтов и попробовать их на практике можно на V-fonts.com. Среди них есть и известные открытые шрифты – Barlow, Mutador Sans, Source Sans, Amstelvar и Cabin VF.

Некоторые из них также доступны через Google Fonts в качестве early access.

Форматы TTF и WOFF2

Файлы шрифтов часто предоставляются в формате TrueType (ttf), но в интернете гораздо лучше использовать сжатый файл в формат WOFF2, чтобы сэкономить место. Чтобы сжать файл шрифта в WOFF2, вы можете использовать такой инструмент, как FontTools. Очень вероятно, что скоро появятся более удобные графические интерфейсы или онлайн-инструменты для работы с файлами шрифтов.

Поддержка браузеров

Переменные шрифты уже довольно хорошо поддерживаются, так что теоретически вы можете начать использовать их прямо сейчас. Но есть несколько нюансов по поддержке; также еще остались некоторые недоработки использования шрифтов в CSS (CSS Fonts Module Level 4). Хороший обзор того, что все еще находится в процессе разработки, вы можете почитать здесь.

Дополнительные ресурсы и инструменты

Вот некоторые дополнительные материалы, которые помогут вам расширить свое понимание переменных шрифтов и их работы в интернете:

А вот два инструмента, которые позволят вам легко проверить и найти вариативные шрифты:

Tags: ,

Добавить комментарий