LeCodesdocs

Шрифты

Кастомные шрифты регистрируются через registerFont, затем указываются в fontFamily в стилях текста. Системным семействам регистрация не нужна: "serif", "sans-serif", "monospaced" работают как значения fontFamily из коробки.

Обзор

TypeScript
const screen = UIScreen([
  UIText("Custom type").style({ fontFamily: "Inter", fontWeight: 700, fontSize: 24, color: "white" }),
]).style({ bgColor: "black", p: 20 })

Promise.all([
  registerFont("Inter", asset('./fonts/Inter.ttf'), { weight: 400 }),
  registerFont("Inter", asset('./fonts/Inter-Bold.ttf'), { weight: 700 }),
]).then(() => screen.open())

registerFont

TypeScript
registerFont(fontFamily: string, url: string, options?: {
  weight?: number,                 // какой fontWeight обслуживает этот файл (400, 700, …)
  style?: "normal" | "italic",
}): Promise<void>
  • fontFamily — имя, которое ты используешь в .style({ fontFamily }). Регистрируй один вызов на файл: семейство с regular + bold — это два вызова registerFont с одним именем и разными weight.
  • url — файл шрифта проекта через asset('./fonts/X.ttf') (или импорт), или удалённый https://… URL как обычная строка.
  • Промис разрешается, когда шрифт загружен и пригоден, и отклоняется при сбое (плохой URL, непарсимый файл).

Загружай шрифты до открытия экрана

Шрифт надёжно применяется только к экранам, открытым после его загрузки — текст, уже на экране, может сохранить запасной шрифт на некоторых хостах. Стандартный паттерн — гейтить точку входа на шрифтах:

TypeScript
Promise.all([
  registerFont("Inter", asset('./fonts/Inter.ttf'), { weight: 400 }),
  registerFont("Inter", asset('./fonts/Inter-Bold.ttf'), { weight: 700 }),
]).then(() => Router.init(homeScreen))     // или screen.open()
Note

наследования стиля нет — fontFamily задаётся на каждый UIText (вынеси общий объект Style<UIText>, а не полагайся на родителя).

Подводные камни

TypeScript
// ✗ голый путь — разрешается только для удалённых http(s)-URL
registerFont("Inter", "./fonts/Inter.ttf")
// ✓ файлы проекта идут через asset() (макрос времени компиляции, только строковый литерал)
registerFont("Inter", asset('./fonts/Inter.ttf'))

// ✗ открытие экрана до разрешения шрифта — текст рендерится запасным
registerFont("Inter", asset('./fonts/Inter.ttf'))
screen.open()
// ✓ дождись его (Promise.all для нескольких начертаний), затем открывай

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

← НазадUIVirtualizedListДальше →CameraViewer