# Конструктор осей и экземпляров вариативных шрифтов и CSS font-variation-settings Загрузите вариативный шрифт (TTF/OTF/WOFF/WOFF2), чтобы изучить оси fvar и именованные экземпляры, посмотреть интерполяцию прямо в браузере и получить готовый CSS font-variation-settings, эквивалентные высокоуровневые свойства и блок @font-face. > Каноническая страница: https://elysiatools.com/ru/tools/variable-font-axis-instance-and-css-font-variation-settings-builder - **Категория:** Design - **Ключевые слова:** вариативный шрифт, оси fvar, именованные экземпляры, css font-variation-settings, предпросмотр вариативного шрифта, проверка woff2 ## Обзор Читает таблицу 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 в реальном времени. ## Входные данные - **Файл шрифта** (file): Upload a variable font (.ttf / .otf / .woff / .woff2) - **Значения осей** (textarea): e.g. wght=625, wdth=110 — leave empty to inspect the font defaults - **Текст предпросмотра** (text): Defaults to "Handgloves 0123 — AaBbGgQqRr ÄÖÜ äöü ß ½ ¼ ←→" ## Когда использовать - Для инспекции допустимых диапазонов осей вариативного шрифта (min, max, default). - При подготовке кастомных стилей CSS font-variation-settings и поиске их стандартных эквивалентов (font-weight, font-width, font-style). - Для тестирования рендеринга и интерполяции символов вариативного шрифта прямо в браузере. ## Как это работает - Загрузите файл вариативного шрифта в формате TTF, OTF, WOFF или WOFF2 (размером до 15 МБ). - При необходимости укажите точные координаты осей в поле «Значения осей» и текст для предпросмотра. - Инструмент распакует шрифт, прочитает таблицу fvar и отобразит интерактивные ползунки для каждой оси. - Скопируйте сгенерированные блоки CSS: font-variation-settings, рекомендованные свойства шрифта и правило @font-face. ## Сценарии использования - Анализ неизвестного WOFF2-шрифта для выяснения поддерживаемых параметров растяжения и плотности. - Точная настройка толщины (wght) и оптического размера (opsz) для дизайн-системы веб-приложения. - Генерация безопасного CSS-кода для нестандартных и параметрических осей вариативной гарнитуры. ## Частые вопросы ### Какие форматы файлов вариативных шрифтов поддерживаются? Поддерживаются файлы 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 все предопределенные экземпляры со значениями их координат. ## Связанные инструменты - [Экстрактор зачеркиваний из PDF-ревью](https://elysiatools.com/ru/tools/pdf-strikethrough-review-extractor): Находит зачеркнутый текст в PDF-документах ревью и формирует отчет для договоров и редакций - [Генератор меток синхронного чтения](https://elysiatools.com/ru/tools/audio-read-along-cue-generator): Создаёт метки на уровне предложений или слов с таймстампами из аудио закадровки и сценария. - [Инспектор файлов шрифтов (TTF / OTF / WOFF / WOFF2)](https://elysiatools.com/ru/tools/font-file-inspector): Загрузите шрифт TTF, OTF, WOFF или WOFF2 (WOFF2 автоматически распаковывается) и изучите все метаданные: семейство/подсемейство/дизайнер/копирайт/версия, число глифов, unitsPerEm, насыщенность и ширину, угол наклона, флаги стиля и bounding box; тепловую карту покрытия по блокам Юникода; SVG-предпросмотр глифов (свой текст, автосбор для иконочных шрифтов); лигатуры liga и возможности OpenType; оси fvar и именованные экземпляры вариативных шрифтов. - [Палитра из изображения в design-токены](https://elysiatools.com/ru/tools/image-to-design-tokens): Извлекает доминирующие цвета из изображения методом k-средних и экспортирует их как CSS-переменные / SCSS / конфиг Tailwind / JSON-токены с именами и шкалой оттенков - [Анализатор изображений VP8](https://elysiatools.com/ru/tools/vp8-image-analyzer): Анализирует WebP/VP8 через Sharp, создает grayscale displacement map и рендерит 3D-рельеф в Three.js - [Калькулятор clamp для fluid typography CSS](https://elysiatools.com/ru/tools/css-fluid-typography-clamp-calc): Введите границы viewport и шрифта, чтобы получить clamp(), готовый CSS и данные превью - [Планировщик миграции CSV в базу данных](https://elysiatools.com/ru/tools/csv-to-database-migration-planner): Выводит реляционную схему из CSV и генерирует CREATE TABLE и ALTER для PostgreSQL, MySQL, SQLite или SQL Server - [Стеганография изображений: встраивание и обнаружение](https://elysiatools.com/ru/tools/image-steganography-embed-detect): Прячет текст в младшие биты PNG, извлекает обратно и выполняет стегоанализ по методу хи-квадрат Вестфельда–Пфицмана со скользящей кривой p и превью битового плана LSB. ## Примеры - [Примеры Переменных Шрифтов](https://elysiatools.com/ru/samples/variable-font-samples): Файлы переменных шрифтов с осями fvar для инспектора осей/экземпляров и CSS-конструктора - [Примеры CSS-фреймворка Bulma](https://elysiatools.com/ru/samples/bulma): Примеры CSS-фреймворка Bulma, включая столбцы, компоненты, элементы управления формами, систему сетки и современные шаблоны дизайна на основе CSS - [Примеры CSS-селекторов](https://elysiatools.com/ru/samples/css-selectors): Коллекция примеров CSS-селекторов для тестирования извлечения и анализа - [Примеры Кода с Недопустимыми Именами Переменных](https://elysiatools.com/ru/samples/code-invalid-variable-names-samples): Примеры кодовых файлов, демонстрирующие недопустимые соглашения об именовании переменных на различных языках программирования