Менеджер стилей Text formats. Форматирование и работа со шрифтами

Text formats. Форматирование и работа со шрифтами

Содержание

Управление шрифтами

Подключение шрифтов из Google Fonts

Подключение шрифтов из Adobe Fonts

Получение Adobe Fonts API Token

Загрузка собственных шрифтов

Удаление шрифтов

Удаление шрифтов в Adobe Fonts

Редактирование текстовых форматов

Добавление текстового формата

Размер шрифта

Толщина (вес)

Высота строки

Порядок текстовых форматов

Кастомные настройки жирного и курсива

Настройки для мобильных устройств

Дополнительные настройки оформления

Ссылки

Подписи к изображениям и эмбедам

 

Управление шрифтами

Перед редактированием текстовых форматов, потребуется определиться с набором используемых шрифтов. Style Manager поддерживает шрифты из Google Fonts, Adobe Fonts и ваши собственные шрифты в формате WOFF.

Примечание: использование кастомных шрифтов недоступно для бесплатной версии Setka Editor.

Чтобы добавить новые шрифты, откройте любой текстовый формат из списка слева и нажмите Manage Fonts. Затем выберите необходимое из библиотеки Google Fonts, Adobe Fonts, или загрузите кастомные шрифтыНовый шрифт появится в разделе Font family, внутри текстового формата.

Screen_Shot_2017-04-28_at_16.19.56.png

 

Подключение шрифтов из Google Fonts

Для добавления новых шрифтов:

1. Нажмите Manage Fonts и перейдите во вкладку Google Fonts.

2. Введите название шрифта в строке поиска и выберите его:

 

3. Выберите требуемые языки из списка и нажмите Save.

______________2020-04-21___16.37.42_result.png

 

4. Шрифты появятся в выпадающем меню Font family, внутри текстового формата.

 

Подключение шрифтов из Adobe Fonts

Для добавления новых шрифтов:

1. Нажмите Manage Fonts и перейдите во вкладку Adobe Fonts.

2. Введите свой Adobe Fonts API Token.

Screen_Shot_2018-12-14_at_15.05.23.png

 

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:

Screen_Shot_2018-12-14_at_14.49.12.png

 

2. Сгенерируйте новый API Token, нажав кнопку Make me a new API token, или скопируйте уже имеющийся.

mceclip0.png

 

Загрузка собственных шрифтов

Чтобы добавить кастомные шрифты, нажмите на кнопку Manage fonts. Загрузите файлы во вкладке Upload fonts (они должны быть в формате WOFF). После этого файлы можно переименовать. Чтобы файлы добавились в выпадающее меню выбора шрифтов, нажмите на кнопку Save в появившемся окне.  

Screen_Shot_2017-04-28_at_16.20.06.png

 

Удаление шрифтов 

Нажмите Manage fonts. Во вкладках Google Fonts и Upload Fonts вы увидите бейджи загруженных шрифтов, при наведении на них появится крестик. Нажмите на него, чтобы удалить ненужные шрифты.

Каждый бейдж показывает, в скольких форматах текста используется выбранный шрифт, чтобы вы случайно не удалили нужные шрифты. 

Screen_Shot_2017-04-28_at_16.25.09.png

 

Удаление шрифтов в 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.

Screen_Shot_2019-12-27_at_12.22.12.png

Измененный порядок текстовых отобразится в редакторе, после сохранения стиля:

Screen_Shot_2019-12-27_at_12.22.54.png

 

Кастомные настройки жирного и курсива

Иногда недостаточно просто выделить текст жирным или курсивом. В таких случаях можно использовать особые стили для bold и italic. Это классический прием типографики из книг, журналов и газет.

Стилизованные bold и italic дают больше свободы для создания красивого и хорошо читаемого контента.

 

Чтобы настроить форматирование для жирного и курсива, перейдите в Text formats -> [Формат из списка] -> Advanced bold & italic. Активируйте пункт Custom appearance for Bold text для жирного, или Custom appearance for Italic text для курсива:

Screen_Shot_2017-04-28_at_16.34.54.png

  

Настройки для мобильных устройств

В Style Manager доступен предпросмотр стилей для разных устройств. Переключение между типами устройств происходит с помощью кнопок в верхней части экрана: Desktop Tablet Mobile.

Текстовые форматы также поддаются мобильным настройкам. Например, если шрифт выглядит слишком крупным на смартфонах, его можно уменьшить или даже заменить на другой.

Чтобы задать параметры шрифтов для планшета или смартфона:

1. Перейдите в Text formats -> [Формат из списка] -> Screen size -> Tablet / Mobile.

2. Активируйте пункт Custom appearance for tablet screen или Custom appearance for mobile screen, соответственно.

3. По умолчанию, стили для планшетов и смартфонов будут такими же, как в разделе Desktop. Но любые их параметры поддаются тонкой настройке:

 

Дополнительные настройки оформления

Дополнительно можно настроить внешний вид ссылок и подписей к изображениям.

Чтобы настроить внешний вид ссылок, перейдите в Text formats -> LinksСсылки можно:

  • Выделить подчёркиванием (Underline style).
  • Писать заглавными буквами (Letter Case).
  • Выделить, увеличив межбуквенное расстояние ().

 

Подписи к изображениям и эмбедам

Чтобы настроить внешний вид подписей к изображениям и эмбедам, перейдите в Text formats -> Image captions. Подписи к изображениям оформляются одним из уже заданных текстовых форматов.