Используем True Type шрифт для хранения иконок

Это сообщение описывает шаги, необходимые для создания Android приложения, которое использует True Type шрифт (Font Awesome), с целью хранения иконок. Использование шрифта для хранения иконок имеет ряд преимуществ, по сравнению с использованием растровых изображений:

- Иконки имеют очень маленький вес

- Иконки векторные, а значит, будут выглядеть красиво на высоких разрешениях

Данная статья содержит инструкции для C++ и Object Pascal проектов для Android платформы(в оригинальной статье есть ещё под iOS, оригинал)

Обновление от 22.11.2019. Добавил список(70+) бесплатных шрифтов для коммерческой разработки.

Обновление: Со мной связалась Dana Sallow и предложила добавить в статью список (70+) шрифтов, которые можно бесплатно использовать для коммерческой разработки.
Я ничего против не имею, так что держите ссылку на список: 70+ Best Free Fonts for Designers – Free for Commercial Use in 2019
Thanks Dana!

Что необходимо сделать для использования True Type шрифта в вашем приложении.

1. Создаём новый проект
2. Сохраняем проект в отдельную папку
3. Скачиваем архив с Font Awesome, распаковываем, копируем файл  fontawesome-webfont.ttf из папки "\font-awesome-4.3.0\fonts\" в корень папки с нашим проектом
4. Переименовываем файл fontawesome-webfont.ttf в FontAwesome.ttf
5. Устанавливаем шрифт FontAwesome.ttf в операционную систему, чтобы он отображался в среде разработки
6. Чтобы использовать шрифт, например для метки (Label), достаточно указать его в свойстве  TextSettings.Font.Family. Внимание! Свойство чувствительно в регистру, а также не надо указывать расширение шрифта(ttf в данном случае).

Как использовать ту или иную иконку.

Первый способ:

1. В Windows заходим в «Таблицу символов», выбираем наш шрифт «FontAwesome», нам отображаются все доступные иконки
2. Выбираем иконку и копируем её
3. Выбираем компонент, свойство «Text» и вставляем туда иконку. (Прим. от переводчика: У меня такие иконки нормально отображаются на форме, но свойство выглядит как « - » (тире с пробелами))

Или можно установить иконку из кода приложения:

В C++:

SomeLabel->Text = (System::WideChar)(0xf042);

В Object Pascal:

SomeLabel.Text := widechar($f042);

Где f042 является Unicode обозначением отдельной иконки в пакете шрифта.

Автор статьи сделал демо проект, в который добавил два вспомогательных файла (для C++ и OP), которые содержат значения для всех иконок из FontAwesome пакета.

Файлы:

• FontAwesomeCodes.pas
• FontAwesomeCodes.h

Имена переменных совпадают с именами иконок (в имени переменной используется подчёркивание вместо тире). Имена иконок и сами иконки можно посмотреть на сайте.

Например:

SomeLabel->Text = fa_ambulance;

SomeLabel.Text = fa_ambulance;

Теперь остаётся добавить (задеплоить) шрифт в проект.

1. Заходим в Deployment Manager
2. Добавляем файл FontAwesome.ttf
3. Прописываем у файла новый путь (Remote Path) «.\assets\internal»

1. Далее копируем файл FMX.FontGlyphs.Android.pas из папки «C:\Program Files (x86)\Embarcadero\Studio\15.0\source\fmx» в корень папки с нашим проектом
2. В Project Manager щёлкните правой кнопкой по вашему проекту и выберите меню «Add…», в открывшемся окне выберите файл FMX.FontGlyphs.Android.pas (из папки с проектом)
3. Теперь в Project Manager щёлкните дважды по файлу FMX.FontGlyphs.Android.pas, он откроется в среде разработки
4. Выполните следующие изменения:

• В uses добавьте модуль System.IOUtils

uses
  FMX.FontGlyphs, Androidapi.JNI.GraphicsContentViewText, System.IOUtils;

• Спуститесь до 64 строки и добавьте новую переменную «FontFile: string;»

var
  TypefaceFlag: Integer;
  Typeface: JTypeface;
  FamilyName: JString;
  Metrics: JPaint_FontMetricsInt;
  FontFile: string;

• На 85 строке закомментируйте строчку Typeface := TJTypeface.JavaClass.create(FamilyName, TypefaceFlag);

• И добавьте ниже:

FontFile := TPath.GetDocumentsPath + PathDelim + CurrentSettings.Family + '.ttf';
if FileExists(FontFile) then
  Typeface := TJTypeface.JavaClass.createFromFile(StringToJString(FontFile))
else
  Typeface := TJTypeface.JavaClass.Create(FamilyName, TypefaceFlag);

• d) И последнее, нужно убедиться, что файл загружается только в Android. Для этого используем $IFDEF.
• Строка 11:

interface
{$IFDEF ANDROID}

• Строка 39:

 end;
{$ENDIF}
implementation
{$IFDEF ANDROID}
uses

• Строка 282:

end;
{$ENDIF}
end.

Демо проект (оригинальная ссылка): http://cc.embarcadero.com/item/30120
Зеркало в моём блоге: Скачать с Google Drive

На этом всё.

Это вольный перевод статьи True Type Font Iconography for Android and iOS Apps Автор: Brian Alexakis