Содержание
Подключение шрифтов из Google Fonts
Подключение шрифтов из Adobe Fonts
Получение Adobe Fonts API Token
Удаление шрифтов в Adobe Fonts
Редактирование текстовых форматов
Кастомные настройки жирного и курсива
Настройки для мобильных устройств
Дополнительные настройки оформления
Подписи к изображениям и эмбедам
Управление шрифтами
Перед редактированием текстовых форматов, потребуется определиться с набором используемых шрифтов. Управление дизайн системой поддерживает шрифты из Google Fonts, Adobe Fonts и ваши собственные шрифты в формате WOFF.
Примечание: использование кастомных шрифтов недоступно для бесплатной версии Setka Editor.
Чтобы добавить новые шрифты, откройте любой текстовый формат из списка слева и нажмите Manage Fonts. Затем выберите необходимое из библиотеки Google Fonts, Adobe Fonts, или загрузите кастомные шрифты. Новый шрифт появится в разделе Font family, внутри текстового формата.
Подключение шрифтов из Google Fonts
Для добавления новых шрифтов:
1. Нажмите Manage Fonts и перейдите во вкладку Google Fonts.
2. Введите название шрифта в строке поиска и выберите его:
3. Выберите требуемые языки из списка и нажмите Save.
4. Шрифты появятся в выпадающем меню Font family, внутри текстового формата.
Подключение шрифтов из Adobe Fonts
Для добавления новых шрифтов:
1. Нажмите Manage Fonts и перейдите во вкладку Adobe Fonts.
2. Введите свой Adobe Fonts API Token.
3. После ввода ключа, Adobe Fonts web projects синхронизируются с Setka Editor. Чтобы обновить список проектов, нажмите Sync projects. Выберите нужный web project. К одному стилю можно подключить только один web project, но в нем может быть сколько угодно шрифтов.
4. Шрифты появятся в выпадающем меню Font family, внутри текстового формата. При использовании одновременно Google Fonts и Adobe Fonts, у вас будет несколько групп шрифтов – чтобы понимать, откуда какой шрифт, если у них одинаковые названия.
Примечание: стили Setka Editor не поддерживают опцию Dynamic subsetting из Adobe Fonts.
Получение Adobe Fonts API Token
Для получения API Token:
1. Войдите в свой аккаунт Adobe Fonts и кликните на аватар в правом верхнем углу. В меню выберите API Tokens:
2. Сгенерируйте новый API Token, нажав кнопку Make me a new API token, или скопируйте уже имеющийся.
Загрузка собственных шрифтов
Чтобы добавить кастомные шрифты, нажмите на кнопку Manage fonts. Загрузите файлы во вкладке Upload fonts (они должны быть в формате WOFF). После этого файлы можно переименовать. Чтобы файлы добавились в выпадающее меню выбора шрифтов, нажмите на кнопку Save в появившемся окне.
Удаление шрифтов
Нажмите Manage fonts. Во вкладках Google Fonts и Upload Fonts вы увидите бейджи загруженных шрифтов, при наведении на них появится крестик. Нажмите на него, чтобы удалить ненужные шрифты.
Каждый бейдж показывает, в скольких форматах текста используется выбранный шрифт, чтобы вы случайно не удалили нужные шрифты.
Удаление шрифтов в Adobe Fonts
Если вы удалите какие-то шрифты из Adobe Fonts web projects, они сразу отключатся на вашем сайте и в превью Setka Editor.
Редактирование текстовых форматов
Работа с текстом и шрифтами ведётся в блоке Text formats, в меню слева.
При создании стиля с нуля, в нём будут доступны встроенные текстовые форматы:
- Paragraph — обычный текст. Использует тег <p> в HTML-коде статьи.
- Extra Large Header, Large Header, Medium Header, Small Header — заголовки разных размеров. Используют в HTML-коде статьи теги от <h1> до <h4>, соответственно.
- Small Text — текст подписей. Использует тег <p> в HTML-коде статьи.
Также настраиваются подписи к изображениям — Image captions. Для них выбирается один из уже имеющихся текстовых форматов. По умолчанию подписи используют формат Small Text.
Добавление текстового формата
Чтобы добавить текстовый формат, нажмите кнопку Add text format. Внутри формата настройте следующие параметры:
Размер шрифта
Чтобы изменить размер шрифта, перейдите в Text formats ->[Формат из списка] -> Size. Размер шрифта задаётся в пикселях (px).
Толщина (вес)
Чтобы поменять толщину шрифта, перейдите в Text formats -> [Формат из списка] -> Weight. Значение 400 — нормальная толщина, 700 — жирный текст.
Высота строки
Чтобы изменить высоту строки, перейдите в Text formats -> [Формат из списка] -> Line height. Высота строки задаётся в процентах от высоты шрифта.
Порядок текстовых форматов
Иногда требуется менять порядок текстовых форматов - например, если вы создали собственные форматы и хотите, чтобы они выступали первыми в списке.
Каждый текстовый формат можно перетаскивать вверх или вниз, меняя таким образом порядок. Перетаскиваются все текстовые форматы, кроме Paragraph.
Измененный порядок текстовых отобразится в редакторе, после сохранения стиля:
Кастомные настройки жирного и курсива
Иногда недостаточно просто выделить текст жирным или курсивом. В таких случаях можно использовать особые стили для bold и italic. Это классический прием типографики из книг, журналов и газет.
Стилизованные bold и italic дают больше свободы для создания красивого и хорошо читаемого контента.
Чтобы настроить форматирование для жирного и курсива, перейдите в Text formats -> [Формат из списка] -> Advanced bold & italic. Активируйте пункт Custom appearance for Bold text для жирного, или Custom appearance for Italic text для курсива:
Настройки для мобильных устройств
В Управлении дизайн системой доступен предпросмотр стилей для разных устройств. Переключение между типами устройств происходит с помощью кнопок в верхней части экрана: Desktop / Tablet / Mobile.
Текстовые форматы также поддаются мобильным настройкам. Например, если шрифт выглядит слишком крупным на смартфонах, его можно уменьшить или даже заменить на другой.
Чтобы задать параметры шрифтов для планшета или смартфона:
1. Перейдите в Text formats -> [Формат из списка] -> Screen size -> Tablet / Mobile.
2. Активируйте пункт Custom appearance for tablet screen или Custom appearance for mobile screen, соответственно.
3. По умолчанию, стили для планшетов и смартфонов будут такими же, как в разделе Desktop. Но любые их параметры поддаются тонкой настройке:
Брейкпоинты в контенте Setka
- Мобильный: 0-767px. Вёрстка полностью кастомизируется с помощью CDSM и редактора постов.
- Планшет: 768-991px. Через CDSM настраиваются текстовые форматы. Вёрстка аналогична десктопной.
- Десктоп: 992px и шире.
Дополнительные настройки оформления
Дополнительно можно настроить внешний вид ссылок и подписей к изображениям.
Ссылки
Чтобы настроить внешний вид ссылок, перейдите в Text formats -> Links. Ссылки можно:
- Выделить подчёркиванием (Underline style).
- Писать заглавными буквами (Letter Case).
- Выделить, увеличив межбуквенное расстояние ().
Посты Setka Editor переключают тип вёрстки, опираясь на 3 брейкпоинта: