LeCodesdocs

Шрифты

Шрифты декларативны: макрос font() времени компиляции устанавливает шрифт и возвращает имя его семейства — использовать шрифт и значит объявить его. Нечего загружать, ждать или гейтить; начертания едут вместе с приложением (бандлятся локально или префетчатся хостом до первой отрисовки), и текст просто рендерится ими. Системным семействам установка не нужна: "serif", "sans-serif", "monospaced" работают как значения fontFamily из коробки.

Обзор

TypeScript
theme({ fontFamily: font("manrope") })          // дефолтный шрифт текста на всё приложение

UIScreen(
  UIText("Display").style({ fontFamily: font("unbounded"), fontSize: 32 }),
  UIText("Body text"),                          // дефолт темы — Manrope
).open()                                       // никакого Promise.all, никакого гейтинга — никогда

font(id) — реестр

font("manrope") резолвится по курируемому реестру шрифтов (~26 OFL-семейств, с поддержкой кириллицы, если не отмечено иное) и компилируется в строку имени семейства "Manrope"; подразумеваемые им начертания регистрируются автоматически до запуска твоего кода.

TypeScript
font(id: string, opts?: { weights?: number[], italic?: boolean }): string
  • По умолчанию устанавливает стандартные веса семейства (обычно 400/500/700). { weights: [400, 600] } сужает или расширяет набор — ставь веса, которые реально используешь (fontWeight: 600 хочет начертание 600; иначе хосты подставляют ближайшее).
  • { italic: true } добавляет курсивные начертания рядом с прямыми (ошибка компиляции называет семейства/веса, у которых курсива нет).
  • Аргумент должен быть строковым литералом — неизвестный id это ошибка компиляции со списком валидных.

Id реестра по категориям:

категория id
sans-serif inter manrope golos-text onest rubik nunito montserrat ibm-plex-sans pt-sans jost exo-2
display unbounded russo-one oswald comfortaa space-grotesk (только латиница)
serif playfair-display lora pt-serif cormorant literata
monospace jetbrains-mono fira-code ibm-plex-mono
handwriting caveat pacifico

font("./path.ttf") — свои файлы шрифтов

Аргумент в форме пути устанавливает файл шрифта проекта. Компилятор сам читает файл — настоящее имя семейства из его таблицы name, вес и курсив из OS/2 — так что нет никаких конвенций именования и никаких опций:

TypeScript
theme({ fontFamily: font("./fonts/Brand.ttf") })   // → "Brand" (из файла)
font("./fonts/Brand-Bold.ttf")                     // то же семейство, добавляет жирное начертание

Только .ttf/.otf (конвертируй экспорты WOFF/WOFF2); путь относителен вызывающему файлу, как у asset().

Системные шрифты

Три обобщённых семейства — просто строки fontFamily: без font(), ничего не устанавливается и не скачивается (вызов font("serif") — ошибка компиляции, указывающая сюда):

TypeScript
UIText("Quote").style({ fontFamily: "serif" })
UIText("SKU-10442").style({ fontFamily: "monospaced" })   // CSS-овский "monospace" тоже принимается

Каждая платформа резолвит их в своё нативное начертание (serif на iOS — New York, на Windows — Times New Roman, и так далее) — используй их, когда хочешь платформенный вид, и шрифт из реестра, когда нужно одно и то же начертание везде. Снапшоты дизайн-борда и lecodes render пришпиливают их к бандленным конкретным начертаниям, чтобы headless-вывод был детерминированным: serif → PT Serif, monospaced → JetBrains Mono, sans-serif → Roboto (дефолтный шрифт UI).

Как это загружается (и почему ты никогда не ждёшь)

Объявленные начертания известны на компиляции: локальные/standalone-сборки бандлят их рядом с приложением (они регистрируются синхронно на старте — вообще без мигания), а платформенные сборки запекают CDN-URL, которые хост префетчит параллельно запуску приложения, ненадолго придерживая первый кадр, чтобы текст с самого начала появлялся в правильном шрифте. Если начертание опаздывает (плохая сеть), текст подменяется, когда оно доедет — это запасной путь, а не нормальный.

Выбор шрифта на элемент

fontFamily задаётся на каждый UIText (или через дефолт theme({ fontFamily }) на всё приложение) — не полагайся на установку на контейнере. Для повторяющейся кастомной стилизации вынеси общий Style<UIText>.

registerFont — рантайм-лазейка

TypeScript
registerFont(fontFamily: string, url: string, options?: { weight?: number, style?: "normal" | "italic" }): Promise<void>

Только для URL, вычисляемых в рантайме (пикер шрифтов, шрифты от пользователя). Один вызов на начертание; промис разрешается, когда начертание пригодно, но раз font() покрывает и реестр, и файлы проекта, это почти никогда не нужно — и ждать его не нужно никогда.

Смотрите также

← НазадNativeViewДальше →Scene