Использование шрифтов в приложениях на FGX Native

Поговорим о, казалось бы, простой теме, но если бы всё было просто, то и не было бы этой статьи. Статья применима к любому шрифту. Пример из статьи будет основан на родных (для Android) стилях шрифта Roboto.

Начнём с описания важных правил:

1. Шрифт должен быть в одном из форматов: "ttf", "otf".
2. Чтобы в дизайнере студии увидеть, как будет отображаться тот или иной шрифт, необходимо установить шрифт в систему.
3. Всегда добавляйте необходимый вам стиль шрифта в своё приложение (ниже я объясню и покажу, почему нужно следовать этому правилу).
4. Не забывайте прописывать полное название шрифта или полный путь до шрифта (в случае, если вы сложили все свои шрифты в отдельной папке).

Общее про шрифты.

Существует огромное количество различных шрифтов и ещё больше стилей этих шрифтов. Также не забывайте, что шрифты бывают как коммерческие, так и бесплатные!

При выборе шрифта, я рекомендую использовать специальный сервис Google: Google Fonts. Помимо просмотра стилей выбранного шрифта, там есть информация по скачиванию или приобретению шрифта.

Для данной статьи я выбрал шрифт Roboto и скачал его в формате «ttf». Скачивается архив сразу со всеми стилями этого шрифта.

Установка/переустановка шрифта в Windows 10.

Дизайнер FGX Native Library пока не умеет подхватывать шрифт из FGX Assets manager! Необходимо установить шрифт в Windows, после этого он появится в дизайнере студии.

Переустановка

Если в вашей системе уже установлен шрифт Roboto и по какой-то причине (может просто вышла новая версия шрифта и вы хотите использовать именно её) вы хотите его переустановить, то удаляем шрифт из Windows, сразу из папки, заходим по пути "C:\Windows\Fonts" находим там Roboto и удаляем. А далее делаем установку нового шрифта.

Установка

Распаковываем скаченный архив, выделяем все файлы с расширением ".ttf", жмём правой кнопкой мышки, в контекстном меню выбираем пункт «Установить для всех пользователей».
В результате выскочит вот такое окно:

Добавляем шрифт в свой проект. 

Внимание! Всегда добавляем шрифт в проект! (даже если он "как бы стандартный" и при условии, что вы хотите видеть максимальную схожесть шрифтов в дизайнтайме и рантайме).

Примечание. Ниже идёт объяснение, почему нужно всегда добавлять шрифт в проект. Если вам это не интересно, то просто проскрольте страницу до заголовка "Как добавить шрифт." 

В противном случае, Android будет везде использовать версию шрифта Roboto (Regular)/sans-serif (normal).

Вот так это будет выглядеть :

Как видим, шрифт отлично применился в дизайнере, но полностью проигнорирован в рантайме.

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

На самом деле, данное поведение вызвано самим Android. 

Android в основном использует шрифт Roboto, но под разными именами, чаще можно встретить семейство «sans-serif», но это может быть и DroidSans и т.п. Т.е. «sans-serif» (normal) = «Roboto» (regular).

(Грубо говоря) В Android есть два «xml» файла отвечающих за шрифты, в них прописываются соответствия имён стилей, семейства и т.п. 

• "/system/etc/fonts.xml" - отвечает за шрифты, используемые по умолчанию в общем (например, в вашем приложении).
• "/system/etc/system_fonts.xml" - отвечает за шрифты, используемые системой.

Вот примеры этих файлов для Android 5.1.1: https://drive.google.com/open?id=1-Z-XMKrfJxF49t48LzBCwKEiBKxyP9Dm

Эти файлы могут быть изменены производителем устройства, т.е. в них может запросто не оказаться даже стандартного имени «sans-serif».

Таким образом,

• прописав у TfgLabel: Font.Family = sans-serif-light. В дизайнере мы не увидим стиля шрифта (т.к. в Windows мы установили шрифт как Roboto), а в рантайме скорее всего всё заработает.
• прописав у TfgLabel: Font.Family = Roboto Light. В дизайнере мы увидим изменение стиля, но в рантайме будет использоваться «sans-serif» (т.к. в файле «fonts.xml» нет имени «Roboto Light»).

На скриншоте вы видите демонстрацию шрифтов в рантайме. 

Левый столбец – шрифты указаны как Roboto * и добавлены в проект через FGX Assets manager. Подхватились и в дизайнере и в рантайме.

Правый – шрифты просто указаны как «sans-serif-*», в рантайме подхватились, в дизайнере нет.

В связи с этим, самый правильный вариант добавить нужный шрифт в FGX Assets manager.

Как добавить шрифт.

Допустим мы уже создали чистый проект, разместили на форме 6 TfgLabel и каждому задали стиль шрифта Roboto в свойстве «Font -> Family».

Теперь заходим в меню «Project -> FGX Assets manager» жмём на кнопку «A» 6 раз.

Получаем

В примере мы используем шесть стилей шрифта Roboto, соответственно, мы должны добавить все шесть в наш проект. В левом столбце указываем полное название шрифта, в правом выбираем файл шрифта. 

Указываем полные имена в соответствии с установленным в Windows шрифтом. Это необходимо для создания единого стиля отображения шрифтов в дизайнтайме и рантайме.

Вот так выглядят названия у меня:

После того как вы выбрали файлы и вписали названия шрифтов, у вас получится что-то вроде этого:

Жмём кнопку «Сохранить» и закрываем FGX Assets manager.

Теперь делаем Build и Deploy проекта. Перекидываем полученный apk на устройство и любуемся шрифтами.

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

На этом всё, спасибо за внимание!