В Lottie-анимациях текстовые слои из Adobe After Effects экспортируются через Bodymovin в JSON-структуру, где сохраняются параметры шрифта, метрики, стилизация и ссылки на гарнитуры. На этапе воспроизведения в Lottie Web текст не является статичным графическим объектом — он либо рендерится через системные/веб-шрифты, либо преобразуется в геометрию в зависимости от настроек экспорта и окружения.
Работа со шрифтами в Lottie опирается на три ключевых слоя:
Каждый из этих уровней влияет на итоговый визуальный результат и предсказуемость отображения.
Текстовый слой в экспортированном файле содержит блок t,
внутри которого хранится описание шрифта и параметров отображения:
{
"ty": "text",
"t": {
"d": {
"k": [
{
"s": {
"f": "Roboto-Bold",
"t": "Hello",
"s": 120,
"fc": [0, 0, 0]
}
}
]
}
}
}Основные параметры:
f — имя шрифта, заданное в After Effectst — текстовая строкаs — размер шрифтаfc — цвет текста (RGB в диапазоне 0–1)Критически важным является то, что Lottie не хранит сам шрифт. Он хранит только ссылку на его имя. Реальный рендеринг зависит от того, доступен ли шрифт в среде выполнения.
Во время загрузки анимации Lottie Web формирует таблицу шрифтов и пытается сопоставить их с доступными ресурсами в браузере.
Система работает по следующему принципу:
Внутренне используется font manager, который отвечает за разрешение имен шрифтов.
При необходимости можно явно определить соответствие между именами из After Effects и веб-шрифтами:
lottie.loadAnimation({
container: document.getElementById('anim'),
renderer: 'svg',
loop: true,
autoplay: true,
path: 'animation.json',
fonts: {
customFonts: [
{
fFamily: 'Roboto-Bold',
fPath: '/fonts/roboto-bold.woff2',
fWeight: 'bold',
fStyle: 'normal'
}
]
}
});В этом случае Lottie Web использует указанный файл шрифта вместо системного.
При использовании веб-шрифтов важна синхронизация загрузки ресурсов и инициализации анимации. Если анимация стартует до загрузки шрифта, происходит временная подмена системным аналогом, что приводит к изменению метрик текста.
Ключевые проблемы:
Для устранения подобных эффектов используется стратегия предварительной загрузки через CSS:
@font-face {
font-family: "Roboto-Bold";
src: url("/fonts/roboto-bold.woff2") format("woff2");
font-weight: bold;
font-style: normal;
}После этого браузер начинает загрузку шрифта до запуска JavaScript-логики.
Если указанный в JSON шрифт недоступен, Lottie Web применяет fallback-цепочку:
Однако даже визуально близкие шрифты редко совпадают по:
Это приводит к нарушению композиции анимации, особенно в сценах с точным позиционированием текста.
Одним из способов устранения проблем со шрифтами является преобразование текста в кривые на этапе экспорта из After Effects.
В этом случае текст теряет семантическую структуру и становится набором векторных контуров. В Lottie JSON такие элементы уже не зависят от шрифтовой системы.
Преимущества:
Недостатки:
Lottie Web поддерживает несколько режимов рендеринга:
Каждый из них по-разному работает со шрифтами.
В SVG текст остаётся текстом <text> и зависит от
CSS-правил и доступности шрифта в системе. Это наиболее чувствительный к
отсутствию шрифтов режим.
Особенности:
В Canvas текст рисуется через fillText и
strokeText. Здесь используется текущий шрифт
canvas-контекста.
Особенности:
DOM-режим использует обычные HTML-элементы. Шрифты полностью контролируются CSS.
Особенности:
Внутренний модуль управления шрифтами выполняет несколько функций:
При загрузке анимации создаётся карта:
fontName (JSON) → fontFamily (browser)Если карта не задана явно, используется прямое совпадение имени.
Критический аспект работы с текстом в Lottie — различие метрик между средами After Effects и браузером.
Основные параметры:
Даже при одинаковом font-family браузер может интерпретировать метрики иначе, что приводит к:
В некоторых сценариях требуется заменить шрифт уже после загрузки анимации. Это возможно через обновление стилей или пересоздание текста.
Принцип работы:
Однако такие изменения не всегда синхронизируются с кэшированными вычислениями размеров текста, поэтому требуется принудительный ре-рендер слоя.
При использовании кириллицы, иероглифов или комбинированных наборов символов важна поддержка полного Unicode-контейнера.
Типичные проблемы:
Решением становится использование шрифтов с расширенной кодировкой или предварительная проверка покрытия glyph set.
Производительность рендеринга текста в Lottie зависит от количества текстовых слоёв и сложности шрифтовых вычислений.
Оптимизационные подходы:
В Canvas-режиме особую роль играет частота вызовов перерисовки текста, так как каждый frame может инициировать перерасчёт glyph positioning.
Для стабильного результата шрифты должны быть доступны до старта анимации. Это достигается через:
FontFace APIПример загрузки через API:
const font = new FontFace('Roboto-Bold', 'url(/fonts/roboto-bold.woff2)');
await font.load();
document.fonts.add(font);После этого Lottie Web может безопасно использовать данный шрифт без риска подмены.
Поведение текста определяется не только данными из JSON, но и совокупностью факторов:
Система остаётся чувствительной к окружению, поэтому корректная работа со шрифтами требует строгого контроля на всех этапах — от экспорта до выполнения анимации.