Какие форматы файлов вариативных шрифтов поддерживаются?

Поддерживаются файлы TTF, OTF, WOFF и WOFF2 размером до 15 МБ.

Как генерируется свойство font-variation-settings?

По спецификации CSS Fonts Level 4 §8.2 теги осей сортируются по кодовым единицам, регистрозависимы и очищаются от дубликатов.

Заменяются ли стандартные оси вроде wght высокоуровневыми CSS-свойствами?

Да, инструмент формирует эквивалентные правила font-weight, font-width, font-style и font-optical-sizing.

Отправляется ли файл шрифта на удаленный сервер?

Нет, парсинг таблицы fvar и декомпрессия WOFF2 происходят локально в браузере через WebAssembly и JavaScript.

Можно ли увидеть именованные экземпляры (Named Instances)?

Да, инструмент извлекает из таблицы fvar все предопределенные экземпляры со значениями их координат.

Elysia Tools

Навигация

Design

Конструктор осей и экземпляров вариативных шрифтов и CSS font-variation-settings

Загрузите вариативный шрифт (TTF/OTF/WOFF/WOFF2), чтобы изучить оси fvar и именованные экземпляры, посмотреть интерполяцию прямо в браузере и получить готовый CSS font-variation-settings, эквивалентные высокоуровневые свойства и блок @font-face.

Детали

С чем помогает этот инструмент

Читает таблицу fvar OpenType (оси с min/по умолчанию/max и именованные экземпляры) через opentype.js; WOFF2 распаковывается портом wawoff2 на WebAssembly. Генерация CSS следует CSS Fonts Level 4 §8.2: теги осей чувствительны к регистру, повторные теги берут последнее значение, а итоговый список дедуплицируется и сортируется по возрастанию кодовых единиц — как вычисленное значение в спецификации. При наличии высокоуровневых замен (wght→font-weight, wdth→font-width, slnt/ital→font-style с отрицанием угла, opsz→font-optical-sizing) они выдаются как рекомендованный вариант. Предпросмотр встраивает шрифт как @font-face с data-URI, показывает экстремумы каждой оси, все именованные экземпляры, ваши координаты и интерактивную панель ползунков, печатающую CSS в реальном времени.

Запуск

Запустить этот инструмент

Заполните форму, запустите инструмент и посмотрите результат на этой же странице.

Примеры

Примеры для этого инструмента

Связано

Конструктор осей и экземпляров вариативных шрифтов и CSS font-variation-settings

С чем помогает этот инструмент

Запустить этот инструмент

Примеры для этого инструмента

Продолжить с похожими инструментами и темами

Узнайте, когда использовать этот инструмент, что он поддерживает и как его применяют пользователи.

Ключевые факты

Обзор

Когда использовать

Как это работает

Сценарии использования

Примеры

1. Настройка промежуточной насыщенности и ширины шрифта Cabin

2. Анализ параметрического шрифта с множеством осей

FAQ

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

Примеры CSS-фреймворка Bulma

Примеры CSS-селекторов

Примеры Кода с Недопустимыми Именами Переменных

Экстрактор зачеркиваний из PDF-ревью

Генератор меток синхронного чтения

Инспектор файлов шрифтов (TTF / OTF / WOFF / WOFF2)

Палитра из изображения в design-токены