Знаете ли вы, что когда мы загружаем более 2-3 стилей шрифтов на нашем сайте, лучше использовать переменный шрифт, чтобы уменьшить нагрузку на шрифт и увеличить производительность ⚡️.
Что такое переменный шрифт?
Переменный шрифт — это один файл шрифта с несколькими осями изменения.
Интересная часть переменного шрифта заключается в том, что мы можем установить любое промежуточное значение оси, как показано в демонстрации выше 🤯.
Например, если мы используем обычный шрифт, то мы можем установить только стандартные поддерживаемые значения веса шрифта, такие как 300, 400, 700 и т.д., но в случае переменного шрифта мы можем установить вес шрифта на любое промежуточное значение, такое как 390, 450 и т.д.
Что такое ось в переменном шрифте?
В переменных шрифтах «ось» обычно обозначает один из аспектов дизайна шрифта, который может быть изменен пользователем.
— Знания Google Fonts
Существует 5 стандартных осей вариаций, определенных W3C. Однако шрифт может иметь и любую пользовательскую ось.
Ось определяется с помощью четырехбуквенного тега.
Стандартная ось пишется в строчном регистре. К 5 стандартным осям относятся:
→ wght (Вес)
→ wdth (ширина)
→ ital (курсив)
→ slnt (Slant)
→ opsz (Оптический размер)
Пользовательская ось записывается в верхнем регистре, например:
→ GRAD (Grade)
Различные веб-шрифты имеют разное количество осей вариаций.
Мы можем посмотреть все шрифты с открытым исходным кодом и их оси на сайте Google Variable Fonts.
Как загрузить переменный шрифт?
Если мы загружаем шрифт из сервиса Google Fonts, то он автоматически сгенерирует правильные правила шрифтовой гарнитуры и отобразит переменный шрифт на совместимом устройстве пользователя, когда мы попытаемся использовать несколько стилей веб-шрифта на веб-странице 🎉.
Но если мы самостоятельно размещаем шрифты на нашем сервере, то нам нужно загружать и обслуживать переменный шрифт вручную.
Если мы используем какой-либо проприетарный шрифт, то пакет шрифтов может уже содержать переменный шрифт.
Но если мы используем шрифт Google, то мы можем загрузить оптимизированный переменный шрифт из Google Fonts, следуя этому пошаговому руководству о том, как загрузить переменный шрифт из Google Fonts.
Настройка правила @font-face для переменного шрифта
Если мы загружаем веб-шрифт с помощью Google Fonts, то нам не нужно ничего делать, поскольку служба Google Fonts автоматически генерирует CSS с правильными правилами @font-face для использования переменного шрифта.
Но если мы самостоятельно размещаем переменный шрифт, то нам необходимо написать правила @font-face.
Если переменный шрифт не имеет оси ital, то правило @font-face можно написать следующим образом:
@font-face {
font-family: 'Inter';
font-weight: 100 900; // wght axis
font-style: oblique 0deg 10deg; // slnt axis
src: url('/fonts/inter-variable-font.woff2') format('woff2 supports variations'),
url('/fonts/inter-variable-font.woff2') format('woff2-variations'),
url('/fonts/inter-variable-font.woff2') format('woff2');
}
Если переменный шрифт имеет ось ital, то необходимо написать два правила @font-face. Одно для переменного шрифта нормального стиля, а другое — для переменного шрифта курсивного стиля.
/* normal styled Roboto Serif variable font */
@font-face {
font-family: 'Roboto Serif';
font-weight: 100 900; // wght axis
font-stretch: 50% 150%; // wdth axis
font-style: normal;
src: url('/fonts/roboto-serif-variable-normal.woff2') format('woff2 supports variations'),
url('/fonts/roboto-serif-variable-normal.woff2') format('woff2-variations'),
url('/fonts/roboto-serif-variable-normal.woff2') format('woff2');
}
/* italic styled Roboto Serif variable font */
@font-face {
font-family: 'Roboto Serif';
font-weight: 100 900; // wght axis
font-stretch: 50% 150%; // wdth axis
font-style: italic; // ital axis is boolean, so no range.
src: url('/fonts/roboto-serif-variable-italic.woff2') format('woff2 supports variations'),
url('/fonts/roboto-serif-variable-italic.woff2') format('woff2-variations'),
url('/fonts/roboto-serif-variable-italic.woff2') format('woff2');
}
В приведенном выше коде мы используем один и тот же url с разными форматами для обратной совместимости.
-
«woff2 поддерживает вариации» => последний стандартный синтаксис
-
«woff2-variations» => устаревший синтаксис
-
«woff2» => не является стандартным, но браузеры все еще отображают переменный шрифт, используя только формат файла.
Как использовать переменный шрифт?
Для стандартных осей, таких как wght, wdth, slnt, ital мы можем использовать их соответствующие свойства для установки значения. Сопоставление осей и соответствующих им свойств css показано ниже:
Для стандартной оси opsz и любой пользовательской оси нам нужно установить значение с помощью свойства font-variation-settings.
Ниже приведен пример кода, показывающий, как установить значения переменного шрифта для различных осей.
body {
font-family: 'Roboto Serif', serif;
font-weight: 425; // sets wght axis value
font-stretch: 110%; // sets wdth axis value
font-style: normal; // sets ital axis value
font-variation-settings: 'opsz' 50, 'GRAD' 80;
}
.decorative-text {
font-family: 'Roboto Serif', serif;
font-weight: 700; // sets wght axis value
font-style: italic; // sets ital axis value
}
.slant-text {
font-family: 'Inter', sans-serif;
font-style: oblique -5deg; // sets slnt axis value
}
Мы можем установить значения стандартных осей с помощью свойства font-variation-settings, но рекомендуется использовать соответствующее свойство для установки значения, чтобы браузер не пытался отобразить шрифт с любым недопустимым значением оси.
body {
font-family: 'Roboto Serif', serif;
/* Valid but not recommended */
font-variation-settings: 'wdth' 110, 'wght' 425;
/* Recommended to set value using standard css property */
font-weight: 425;
font-stretch: 110%;
}
Что насчет совместимости с браузерами?
Переменный шрифт очень хорошо поддерживается примерно в 91% активных версий браузеров/ОС по состоянию на май 2022 года.
При загрузке шрифта из Google Fonts он автоматически заботится о том, чтобы переменный шрифт отображался только на совместимых устройствах.
При самостоятельном размещении переменного шрифта мы можем реализовать обратную совместимость браузеров с помощью функционального запроса @supports, как показано ниже:
// Inter variable font
@font-face {
font-family: "InterVariable";
font-weight: 100 900;
font-style: oblique 0deg 10deg;
src: url("/fonts/inter-latin-variable-full-font.woff2") format("woff2 supports variations"),
url("/fonts/inter-latin-variable-full-font.woff2") format("woff2-variations"),
url("/fonts/inter-latin-variable-full-font.woff2") format("woff2");
}
/* ----------- Non-variable Inter font-face rules ----------- */
// thin Inter font
@font-face {
font-family: "Inter";
font-weight: 300;
src: url("/fonts/inter-latin-thin.woff2") format("woff2")
}
// regular Inter font
@font-face {
font-family: "Inter";
font-weight: 400;
src: url("/fonts/inter-latin-regular.woff2") format("woff2")
}
// bold Inter font
@font-face {
font-family: "Inter";
font-weight: 700;
src: url("/fonts/inter-latin-bold.woff2") format("woff2")
}
/* ------------------- Usage -------------------------*/
body {
font-family: 'Inter', sans-serif;
}
@supports (font-variation-settings: 'wdth' 450) {
body {
font-family: 'InterVariable', sans-serif;
}
}
В приведенном выше коде мы создаем одно правило @font-face для использования переменного шрифта. Мы также создаем отдельные правила @font-face для различных стилей шрифта-фамилии.
После этого мы устанавливаем переменный шрифт только в том случае, если он поддерживается с помощью функционального запроса @supports. Таким образом, совместимые устройства/браузеры будут использовать шрифт InterVariable, а несовместимые устройства/браузеры будут использовать обычный шрифт Inter.
Заключение
Вот как мы можем использовать переменный шрифт сегодня, независимо от того, загружаем ли мы веб-шрифт из сервиса Google Fonts или самостоятельно размещаем переменный шрифт, что приводит к улучшению производительности сайта.
Использование переменного шрифта — это лишь одна из многих стратегий оптимизации загрузки шрифтов для улучшения производительности и UX сайта.
Если вы хотите узнать больше о других стратегиях ускорения загрузки веб-шрифтов на вашем сайте 🚀 и улучшения UX, ознакомьтесь со статьей Современные стратегии оптимизации загрузки веб-шрифтов. В этой статье подробно рассказывается обо всех проблемах, которые возникают при использовании веб-шрифта, и о том, как решить все эти проблемы и тем самым обеспечить лучшую производительность, UX и SEO для сайта.