Шрифты и текстовые данные

Текст в Lottie представляет собой отдельный тип слоя, который сериализуется из After Effects и сохраняется в JSON-структуре анимации. В отличие от векторных shapes, текстовые слои не являются геометрией по умолчанию — они описываются как набор параметров, которые должны быть интерпретированы движком рендеринга (например, lottie-web).

Ключевое поле текстового слоя — t, внутри которого содержится описание текстового содержимого и его визуальных параметров:

• t.d.k — ключевые кадры текстового содержимого
• t.d.k[].s.t — строка текста
• t.d.k[].s.f — шрифт
• t.d.k[].s.s — размер шрифта
• t.d.k[].s.j — выравнивание
• t.d.k[].s.fc — цвет заливки текста
• t.d.k[].s.sc — цвет обводки
• t.d.k[].s.sw — толщина обводки
• t.d.k[].s.lh — межстрочный интервал
• t.d.k[].s.ls — межбуквенный интервал

Дополнительно текстовый слой содержит трансформации (ks), маски, эффекты и привязку к композиции, как и любой другой слой.

Представление шрифтов в структуре Lottie

Шрифты в Lottie не являются бинарными файлами (woff/ttf), а описываются через метаданные в секции fonts:

• fonts.list[] — список шрифтов
• fonts.list[].fName — имя шрифта
• fonts.list[].fFamily — семейство
• fonts.list[].fStyle — стиль (Regular, Bold и т.д.)
• fonts.list[].ascent — метрика подъёма
• fonts.list[].fPath — путь (в некоторых экспортерах)
• fonts.list[].origin — источник шрифта

Lottie Web не загружает шрифты автоматически. Он использует либо системные шрифты браузера, либо заранее подключённые веб-шрифты, сопоставленные по имени.

Рендеринг текста в lottie-web

Библиотека lottie-web поддерживает несколько стратегий рендеринга:

• SVG renderer
• Canvas renderer
• HTML renderer (DOM)

В контексте текста различия критичны.

SVG renderer преобразует текст в <text> элементы SVG, если шрифт доступен в системе или в CSS. Canvas renderer чаще всего конвертирует текст в пути (paths), особенно если требуется точное соответствие макету After Effects.

DOM renderer опирается на CSS-рендеринг и системные шрифты, что делает его наиболее зависимым от окружения.

Основная проблема заключается в том, что Lottie не гарантирует наличие исходного шрифта. Поэтому совпадение визуального результата зависит от механизма font matching браузера.

Проблема отсутствующих шрифтов

Если шрифт, указанный в JSON, отсутствует в системе или не загружен через CSS, происходит fallback:

1. Подстановка ближайшего системного шрифта
2. Пересчёт метрик текста
3. Возможное смещение анимации

Это приводит к критическим визуальным расхождениям, особенно в анимациях, где текст участвует в трансформациях, масках или path morphing.

Типичный сценарий:

• В After Effects используется кастомный шрифт
• При экспорте Bodymovin сохраняет только имя шрифта
• В браузере шрифт отсутствует
• Lottie заменяет его на дефолтный sans-serif
• Разбивается выравнивание и кернинг

Привязка шрифтов в lottie-web

lottie-web позволяет переопределять обработку шрифтов через FontManager.

Внутренний механизм:

• fontManager.addChars() — добавление символов
• fontManager.setFonts() — регистрация шрифтов
• fontManager.loadWebFont() — подключение веб-шрифтов

Фактически это слой абстракции между JSON Lottie и реальными font-face в браузере.

Пример логики сопоставления:

• имя шрифта из JSON (fFamily)
• поиск совпадения в зарегистрированных fonts
• применение CSS font-family
• fallback при отсутствии совпадения

Текст как набор символов (glyph-based модель)

Lottie может представлять текст не как строку, а как набор глифов. Это особенно важно при экспорте через Bodymovin с включённой опцией “Glyphs”.

В этом случае структура включает:

• chars — массив символов
• chars[].ch — символ
• chars[].data — векторное представление глифа
• chars[].w — ширина символа

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

Минусом является увеличение размера JSON и невозможность редактирования текста на лету.

Трансформации текстового слоя

Текстовые слои поддерживают стандартные трансформации:

• позиция (position)
• масштаб (scale)
• вращение (rotation)
• опорная точка (anchorPoint)

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

При включённых text animators из After Effects:

• каждый символ получает индивидуальные трансформации
• создаются дополнительные keyframes на уровне glyphs
• формируется сложная структура в t.a

Анимация текста и селекторы

Lottie поддерживает результат экспорта text animators из After Effects, включая:

• Range Selector
• Wiggly Selector
• Expression-based modifiers (частично)

В JSON это выражается через блок:

• t.a — массив аниматоров текста
• t.a[].s — параметры селектора
• t.a[].a — анимационные свойства

Типичные анимируемые параметры:

• opacity
• position
• scale
• rotation
• tracking (межбуквенный интервал)
• blur (в ограниченной форме)

Каждый символ текста рассматривается как независимая сущность, что позволяет имитировать эффекты типа typewriter, wave, scatter.

Межбуквенные и межстрочные параметры

Ключевые текстовые параметры напрямую влияют на геометрию композиции:

• ls (letterSpacing) — расстояние между символами
• lh (lineHeight) — высота строки
• j (justification) — выравнивание

Эти параметры пересчитываются на этапе рендеринга, а не заранее, что означает динамическое изменение layout при каждом кадре анимации.

Особенно критично это при анимации ls, когда текст “разъезжается” или “сжимается” в реальном времени.

Поддержка веб-шрифтов

Для корректного отображения текстов Lottie в браузере требуется синхронизация JSON и CSS font-face.

Основная проблема — несоответствие имен:

• В After Effects: Roboto-Bold
• В CSS: Roboto Bold
• В Google Fonts: Roboto:700

Из-за этого font matching часто требует ручной нормализации.

В lottie-web шрифты могут быть подгружены заранее через CSS:

• @font-face
• внешние CDN-шрифты
• локальные файлы

После загрузки браузер сам становится источником рендеринга текста.

Ограничения текстовой модели

Текстовая система Lottie имеет ряд архитектурных ограничений:

• отсутствие полноценного rich text (нет HTML-разметки)
• ограниченная поддержка кернинга
• нет сложной типографики OpenType (лигатуры, альтернативы)
• частичная поддержка justify
• зависимость от renderer

При конвертации в shapes ограничения исчезают, но теряется редактируемость текста.

Конвертация текста в shapes

Один из способов устранить проблемы со шрифтами — преобразование текста в векторные контуры на этапе экспорта.

В этом случае:

• текст перестаёт быть текстом
• каждый символ становится path
• исчезает зависимость от font-family
• увеличивается размер файла
• ухудшается масштабируемость структуры JSON

Такая модель используется в случаях, где визуальная идентичность важнее гибкости.

Поведение при масштабировании и DPI

Текстовые слои в Lottie зависят от:

• pixel ratio устройства
• renderer (SVG vs Canvas)
• метрик шрифта

SVG-рендер сохраняет масштабируемость через vector-based text, тогда как Canvas может rasterize текст, особенно при сложных анимациях.

При изменении масштаба композиции возможны:

• дрейф baseline
• расхождение межбуквенных интервалов
• изменение визуальной толщины шрифта

Работа с нестандартными символами

Unicode-символы обрабатываются по-разному в зависимости от режима:

• glyph mode требует наличия символа в chars
• font mode зависит от поддержки шрифта
• fallback символы могут заменяться квадратами или дефолтными глифами

Особенно проблемными являются:

• кириллица в кастомных шрифтах без поддержки
• emoji (часто отсутствуют в glyph export)
• комбинированные диакритические символы

Оптимизация текстовых слоёв

Оптимизация текстовой части Lottie обычно включает:

• минимизацию числа аниматоров текста
• отключение glyph export при возможности использования web fonts
• предзагрузку шрифтов через CSS
• унификацию font-family между AE и веб-окружением
• избегание частой анимации letterSpacing и fontSize

На уровне runtime lottie-web может кешировать glyphs и font metrics, снижая нагрузку на повторный рендер кадров, где текст не меняется.