Как использовать сторонний шрифт в онлайн документации?
В этой статье мы расскажем, как настроить типографику своего проекта. Если вам нужно, чтобы руководство пользователя имело тот же шрифт, что и маркетинговые материалы или интерфейс самого продукта, эта инструкция для вас. Вы узнаете, как использовать сторонние шрифты в работе с типографикой онлайн документации.
Подключить сторонний шрифт можно одним из двух способов: по ссылке (например, с сервиса Google Fonts) и локально (скачав на компьютер). Рассмотрим второй способ.
Как подключить шрифт локально?
Чтобы подключить шрифт из папки локально, нужно сделать два шага:
-
перенести скачанный файл шрифта в папку webfonts проекта вашей документации;
-
добавить код CSS для шрифта всей документации или только для определенной ее части (навигация, меню и т.д.).
Порядок выполнения этих шагов значения не имеет.
В этом примере воспользуемся сервисом Paratype.
Paratype — это веб-сервис, предоставляющий бесплатные кириллические шрифты для использования на сайтах и в приложениях. Для использования шрифтов сервиса Paratype необходима регистрация.
|
Перед началом работы со скачанными шрифтами проект документации следует экспортировать в формат HTML.
|
Рассмотрим, как использовать в документации сторонний шрифт Literata.
На главной странице сервиса Paratype введите в поле поиска название Literata и кликните предложенный вариант Literata by TypeTogether:
Откроется страница с разными начертаниями. Выберите начертание Regular, нажав Скачать:
На открывшейся странице скачайте Literata Regular (WEB):
Разархивируйте скачанный архив и переместите его файлы в папку "webfonts" экспортированной документации.
Теперь нужно вставить код CSS со стилем шрифта в программу Dr.Explain.
Чтобы сделать это, используйте один из описанных ниже способов:
-
перейдите в меню Проект и выберите пункт Настройки проекта;
-
нажмите сочетание клавиш Ctrl+Alt+P.
на Откроется показанное ниже диалоговое окно.
Перейдите в пункт HTML-экспорт. В блоке Дополнительный CSS нажмите иконку карандаша:
В открывшемся окне Редактирование CSS вставьте следующий код:
* {
font-family: "Literata" !important;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
}
Нажмите OK, чтобы сохранить внесенные изменения.
Результат не отображается в поле редактора Dr.Explain. Проверьте изменения, переключившись на вкладку Просмотр HTML. Вы также можете оценить результат, экспортировав проект и открыв его в браузере.
|
Откройте экспортированную документацию в браузере:
Текст отображается шрифтом Literata. Убедиться в этом можно, открыв в браузере консоль разработчика (клавиша F12):
Если нужно изменить только шрифт текста в разделах, не изменяя его в меню и в элементах навигации, используйте код:
div.description_on_page div.p {
font-family: "Literata" !important;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
}
Если нужно изменить только шрифт определенного фрагмента текста, используйте код:
div.description_on_page div.p .literata {
font-family: "Literata" !important;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
}
В этом случае потребуется добавить этому фрагменту текста класс literata. Например, измените шрифт в блоке "Выбор цвета и толщины" в разделе "Введение".
Для этого в программе Dr.Explain перейдите в раздел "Введение".
Нажмите кнопку HTML 
в панели инструментов. В появившемся окне вставьте нужный фрагмент текста, обернув его в тег span с классом literata:
в панели инструментов. В появившемся окне вставьте нужный фрагмент текста, обернув его в тег span с классом literata:<span class="literata">Правее, в группе "Цвета", пользователь может выбрать основной и фоновый цвет. Палитра предлагает несколько стандартных цветов, а также возможность открыть расширенную палитру для выбора любого оттенка. Рядом с инструментами для рисования находится переключатель, позволяющий выбрать толщину линии или контура кисти. Эта опция находится в зависимости от выбранного инструмента, например, она определяет толщину линии у кисти или карандаша.</span>
Нажмите OK, чтобы сохранить изменения и закрыть окно. Откройте эту страницу в браузере:
Возможность настройки типографики помогает пользователям программы Dr.Explain привести контент в соответствие фирменному стилю.
Часто задаваемые вопросы
Можно ли изменить размер и цвет шрифта?
Можно. Используйте для этого панель инструментов или окно настроек Стили форматирования.
Есть ли в программе Dr.Explain готовые шаблоны пользовательских документаций?
Есть. Узнать подробнее о шаблонах Dr.Explain вы можете в разделе Стартовый экран.
Есть ли видео о том, как аннотировать скриншоты в программе Dr.Explain?
О том, как делать аннотации скриншотов, мы показали в видео Аннотируем скриншот интерфейса в Dr.Explain.