Перейти к основному содержимому
Версия: 5.9.0

Типографика

ChatTypography хранит шрифты, которые SDK применяет к элементам чата. Создайте экземпляр, переопределите нужные токены, передайте в ChatTheme и присвойте chatCenterSDK.theme.

Карта токенов

Таблица отражает, какой токен какой элемент SDK рендерит по умолчанию. Изменение токена затронет все перечисленные точки.

ТокенРазмер / ВесГде применяется в SDK
message14 / RegularОсновной текст пузыря сообщения, toast, удалённые сообщения, текст совпадения в результатах поиска, текст цитаты в поле ввода (ChatInputQuoteStyle.messageTextStyle)
heading216 / SemiboldИмя автора сообщения, имя автора цитаты (QuoteStyle.authorTextStyle)
caption210 / RegularВремя отправки сообщения (timeTextStyle) и его состояние ошибки
caption12 / MediumТекст ошибки сообщения, дата системных сообщений, тексты кнопок (ButtonStyle, TextButtonStyle), бейдж счётчика непрочитанных, автор и имя файла в результатах поиска
heading117 / SemiboldЗаголовок навигационной панели
subtitle16 / RegularПодзаголовок навигационной панели, подзаголовки плейсхолдеров, текст цитаты в самом сообщении (QuoteStyle.messageTextStyle), автор цитаты над полем ввода (ChatInputQuoteStyle.messageAuthorTextStyle), подзаголовок вопроса опроса
title17 / RegularЗаголовки плейсхолдеров, заголовки системных сообщений (например, Operator joined), вопрос опроса, имя и размер файла в сообщении-файле
body15 / RegularПоле ввода, меню вложений, QuickReply, текст лоадера, PhotoPicker, текст системного сообщения о расписании
bold15 / SemiboldТекст в ProgressViewStyle, заголовок OG-превью
footnote13 / SemiboldURL в OG-превью
largeTitle28 / SemiboldПо умолчанию SDK его не применяет — задавайте, если ваше приложение использует кастомные компоненты поверх ChatComponents

Применение

let fonts = ChatTypography()
fonts.message = .systemFont(ofSize: 14, weight: .regular)
fonts.bold = .systemFont(ofSize: 15, weight: .semibold)

let theme = ChatTheme(typography: fonts)
chatCenterSDK.theme = theme

Метод apply { } (из протокола Applicable) даёт ту же конфигурацию цепочкой — это основной паттерн в демо-приложении:

chatCenterSDK.theme = ChatTheme(
typography: ChatTypography().apply { fonts in
fonts.message = .systemFont(ofSize: 14, weight: .regular)
fonts.bold = .systemFont(ofSize: 15, weight: .semibold)
}
)

Аналогичный метод ChatTypography.build { } — синоним apply для совместимости.

Устанавливайте тему до getChat(...)

Иначе стили применятся не с первого кадра. Изменение свойств ChatTypography после присваивания темы перерисовку открытого экрана не вызывает.

Полный пример настройки типографики — в демо-приложении: MainViewController+Full.swift.

Кастомные шрифты

Шаг 1. Добавьте файл .ttf / .otf в Xcode-проект с включённой галочкой Target Membership.

Шаг 2. Зарегистрируйте шрифт в Info.plist:

<key>UIAppFonts</key>
<array>
<string>YourFont-Regular.ttf</string>
<string>YourFont-Bold.ttf</string>
</array>

Шаг 3. Присвойте шрифт с fallback. UIFont(name:size:) возвращает nil, если PostScript-имя указано неверно — без ?? интегратор получит крах в рантайме:

let fonts = ChatTypography()
fonts.message = UIFont(name: "YourFont-Regular", size: 14)
?? .systemFont(ofSize: 14)
fonts.bold = UIFont(name: "YourFont-Bold", size: 15)
?? .systemFont(ofSize: 15, weight: .semibold)
Проверьте PostScript-имя

Точное имя шрифта — это PostScript-имя, а не имя файла. Выведите список зарегистрированных шрифтов один раз при старте:

UIFont.familyNames.forEach { family in
UIFont.fontNames(forFamilyName: family).forEach { print($0) }
}

Системные шрифты с кастомными параметрами

fonts.message  = .systemFont(ofSize: 16, weight: .regular)
fonts.bold = .systemFont(ofSize: 16, weight: .bold)
fonts.caption2 = .monospacedDigitSystemFont(ofSize: 10, weight: .regular)

Моноширинные цифры через monospacedDigitSystemFont предотвращают «прыжки» меток времени при смене значений.

Что не настраивается через типографику

ЭлементКак настроить
Цвет ссылокЧерез link / linkLight в цветах
Стиль цитат-ответовЧерез QuoteStyle в стилях
КурсивЧерез UIFont.italicSystemFont(ofSize:) или UIFontDescriptor с трейтом .traitItalic
Markdown внутри сообщения

SDK рендерит весь текст пузыря одним шрифтом ChatMessageStyle.textStyle.font (по умолчанию typography.message). Раздельная типографика для Markdown-элементов (Callout, List, blockquote и т. п.) внутри одного сообщения публичным API не поддерживается.