4 шага для использования вариабельных шрифтов

Jan 31, 2026

Инструкции

Variable fonts: The outlines of various weights and style of a single font family in magenta, emblazoned with the words 'Get versatile with variable fonts' in a bold, sans serif font.

(Кредит на изображение: будущее)

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

Используя Source Sans Pro в качестве примера, вариабельная версия шрифта составляет примерно 394 КБ и поставляется в широком спектре весов. Если бы мы использовали эти весы шрифта индивидуально в качестве стандартных файлов шрифтов, они в среднем, в среднем 234 КБ каждый - приводят к комбинированному размеру файла приблизительно 1856 кб. Конечно, этот расчет предполагает, что все весы шрифта существуют индивидуально в качестве стандартного шрифта, который они не делают. (Хотя если вы ищете только обычные шрифты, проверьте наш пост на Лучшие бесплатные шрифты имеется в наличии.)

Если мы удалим шрифты, которые не существуют в качестве стандартного шрифта, комбинированный размер файла по-прежнему почти в три раза больше средств переменного шрифта и значительно меньшим количеством стилей. Даже если вы просто хотите, чтобы смелые и обычные версии, общие во многих веб-проектах, две версии стандартного источника Sans Pro Font все еще больше, чем один шрифт переменного. Что это демонстрирует, так это то, что с вариабельными шрифтами у нас есть потенциал для массивной экономии пропускной способности без ущерба для наших конструкций и творчества.

A comparison of the filesize of a range of font weights between a standard and a variable font – the standard font family totals 1864kb compared to 394kb for the variable font. — Сравнение размеров файлов ряда весов шрифта между стандартной и переменной версией источника шрифта Sans Pro (Образ кредита: Мэнди Майкл)

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

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

Хотите разместить свои шрифты на новый сайт? Для ресурсов веб-дизайна, отправляйтесь в нашу лучшее Строитель сайта Округление и выбора верхней части веб хостинг Сервисы. Или для обновления хранилища, проверьте эти облачное хранилище опции.

01. Понять оси в вариабельных шрифтах

A chart showing a single variable font transforming along two axes: weight and width. It ranges from low weight and narrow in the bottom left corner to high weight and thick at the top right. — Глядя на интерполяцию переменного шрифта по весу и оси ширины показывает диапазон настроительной настройки, которая доступна (Образ кредита: Мэнди Майкл)

Использование вариабельных шрифтов в наших CSS очень похоже на то, как обычно используем шрифты в Интернете: используя @ Font-Face At-правило Отказ Однако нам сначала нужно понимать различные типы осей внутри переменного шрифта, поскольку это определяет, какие свойства CSS мы используем.

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

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

02. Используйте зарегистрированную ось

A range of variable font weights along an axis from light (200) to black (900). — Вариации веса определены на оси, от света (200) до черного (900) (Образ кредита: Мэнди Майкл)

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

Мы можем настроить наши шрифты, используя @ Font-Face At-правило Как мы обычно будем; Изменение заключается в том, как мы определяем вариации для дескрипторов, таких как вес шрифта, стиль шрифта и стиль шрифта. Ранее мы бы установили шрифт-вес 200 и определили это в качестве световой версии шрифта, мы тогда настроили другой шрифт для смелых версий и регулярной версии, пока у нас не было всех весов, которые были необходимы для дизайн. С переменными шрифтами нам нужен только один шрифт для лица. Таким образом, вместо использования нескольких экземпляров мы указываем диапазон значений, которые соответствуют минимальному и максимальному значению, которые определены на оси шрифта.

 @ font-face {
Семья шрифта: «Source Sans переменная»;
SRC: формат URL («Source-Sans-Variable.woff») («WOFF-вариации»);
Вес шрифта: 200 700;
}

В этом примере мы устанавливаем вес шрифта от 200 до 700. После того, как наш диапазон определен, мы можем выбрать любое число в пределах этого диапазона в качестве нашего веса шрифта, например, 658. Главное, если вы устанавливаете диапазон веса шрифта как от 200 до 700 и Затем попробуйте определить вес 900, даже если шрифт имеет 900 веса, определенный в его оси, вы не сможете его использовать. Диапазон определяет то, что у вас есть доступ в ваши CSS.

03. Настройте пользовательские оси

Поскольку никакие существующие свойства CSS не будут существовать при использовании пользовательской оси, нам нужно использовать новое свойство CSS, называемое настроек Font-Variation. Это позволит нам определить столько именованных и пользовательских осей, сколько нам нужно.

 H1 {
Семья шрифта: «Мой вариабельный шрифт»;
Настройки вариации шрифтов: «WGHT» 375, «INLI» 88;
}

В этом примере WGHT относится к зарегистрированной оси веса, и ИНЛИ относится к пользовательской оси, называемой встроенным, каждый с соответствующим числовым значением, соответствующим точке вдоль оси варианта. Хотя вы можете ссылаться на зарегистрированную ось как значение для вариантов вариаций шрифтов, рекомендуется вместо этого использовать их сопоставленные свойства CSS.

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

 H1 {
  Font-Samea: «Source Sans», Sans-Serif;
  вес шрифта: 700;
}

@Supports (Font-variation-Настройки: Normal) {
h1 {
 Семья шрифта: «декар»;
 Настройки вариации шрифтов: «ИНЛИ» 88;
 }
}

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

04. Объедините JavaScript и переменные шрифты

A range of As rendered in a variety of font weights and sizes, showing the smooth transitions offered by variable fonts. — Переменные шрифты позволяют гладкие переходы от, скажем, тонкие на смелый вес; Это позволяет создавать плавные преобразования, использующие переменные JavaScript (Образ кредита: Мэнди Майкл)

Мы можем использовать события JavaScript для ситуаций, когда мы хотим более тонкой настройке контроля или изменить шрифт на основе событий, которые мы не можем получить доступ с CSS в одиночку. Простой пример будет соответствовать нашему весу шрифта в размере нашего Viewport - поскольку просмотра просмотра становится меньше, вес шрифта становится тяжелее.

Чтобы создать масштаб жидкости, мы должны выровнять два набора значений и единиц - вес шрифта и размер просмотра. Мы можем получить доступ к текущей ширине просмотра, используя окно .innerWidth и создать новую процентную масштаб, преобразуя его в диапазон 0-0,99. Включая минимальный и максимальный размер просмотра, мы можем контролировать диапазон эффекта.

 VAR ViewportScale =
(window.innerwidth - minwindowsize) / (maxwindowsize - minwindowsize);

Затем мы определяем вес шрифта на основе размера нашего вида.

 var fontweightscale = ViewportScale * (Minfontweight - Maxfontweight) + Maxfontweight;

Использование пользовательских свойств CSS, мы можем использовать наше значение JavaScript для обновления веса шрифта в наших CSS.

 P.Style.SetProperty («- вес», фундаментальные веса);

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

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

Вы можете Просмотр кода Для этого на кодепене.

Эта статья была первоначально опубликована в выпуске 318 сеть Самый продаваемый журнал мира для веб-дизайнеров и разработчиков. Подписаться на Net здесь Отказ

Узнайте больше о переменных шрифтах при генерации CSS

An image promoting Bianca Berning's talk 'The future of type' at Generate CSS on 26 September. — (Кредит на изображение: Getty / Bianca Berning / Future)

В своем разговоре при генерировании CSS ориентированная конференция CSS для веб-дизайнеров, происходящих 26 сентября 2019 года в богатых микс, Лондоне, Bianca Berning будет изучать, как вариабельные шрифты могут создавать новые возможности для письменного слова в традиционных медиа, а также новых, погружения Опыт, такие как AR, VR и смешанная реальность.

Если вы хотите поймать это и другие отличные разговоры, это стоит щелкнуть свои билеты сейчас. Если вы захватите свой до 5 вечера UTC 15 августа, вы можете сэкономить 50 фунтов стерлингов, оплата всего за £ 199 + НДС. Купи свой билет сейчас !

Статьи по Теме:

3 способа Tech меняет тип
Начните с вариабельных шрифтов в CSS
Превратите свой тип онлайн с вариабельными шрифтами

4 шага для использования вариабельных шрифтов

01. Понять оси в вариабельных шрифтах

02. Используйте зарегистрированную ось

03. Настройте пользовательские оси

04. Объедините JavaScript и переменные шрифты

Узнайте больше о переменных шрифтах при генерации CSS

Инструкции - Самые популярные статьи

Создайте быстрый реактивный блог с Svelte и Sapper

Используйте Brain.js для создания нейронной сети

Создать голосовое управление UI

Как управлять классами CSS с JavaScript

Как нарисовать традиционную британскую деревенскую сцену

Как сделать свои собственные доски Canvas

Создайте CinemaGraph Photoshop за 60 секунд

5 способов создать более захватывающие переживания VR

Категории