Вступление
74 релиз Construct 2 добавил поддержку Web Fonts. Это значит, что теперь вы можете добавлять в проект и использовать шрифт, которого не было на устройстве пользователя. Чтобы узнать больше, можно прочесть Ashley's tutorial on Web Fonts in Construct 2. Его урок был больше нацелен на использование шрифтов из Google Fonts, но если вы хотите использовать шрифт из другого места, этот туториал вам поможет. Также стоит отметить, что эта возможность есть и в бесплатной версии Construct 2.
Уважайте авторское право!
Возьмите за правило читать лицензии на использование шрифтов! Не все из них бесплатны для использования. Авторы шрифтов могут попросить что-то взамен использования их работ. Это особенно важно, если вы делаете коммерческий продукт.
Поиск шрифта
Формат Web Font поддерживается разными браузерами см. здесь. К счастью, существуют онлайн-конвертеры, которые позволяют из обычного шрифта сделать веб-версию. Я рекомендую использовать Font Squrrel's @font-face Kit Generator. В этом уроке мы будем использовать шрифт из Team Fortress 2. Возьмите шрифт и перейдите на страницу генератора. Он выглядит так:
Нажмите кнопку Add Fonts и выберите свой шрифт. По умолчанию настройки выставлены, как "optimal", и, в принципе, этого хватит (вы конечно можете выбрать "expert" и воспользоватся тонкой настройкой). Нажмите на Yes, the fonts I'm uploading are legally eligible for web embedding (опять же, помните про лицензию на использование!). Если всё готово, нажмите кнопку Download Your Kit. Начнётся загрузка. Когда она закончится, откройте zip-архив. Нужные нам файлы: .eot, .svg, .ttf и .woff, а также the stylesheet.css file (.css можно переименовать, при желании). Извлеките файлы из архива и запустите Construct 2.
Добавление шрифта в приложении
После запуска Construct 2, создайте новый проект или откройте существующий. Now you need to import the font files and the .css file to your project. Кликните правой кнопкой папку Filesна панели Projects и выберите Import files (можно выбрать несколько файлов одновременно).
Теперь создайте объект "Text".
Теперь откройте event sheet и создайте условие On start of layout. Добавьте действие Set web font у текстового объекта. Свойство family name можно найти в .css файле, после "font-family:" text (в нашем случае это tf2_buildtf2_build):
Параметр CSS URL должен быть именем .css файла ("stylesheet.css", или как вы его переименовали). Вот как выглядит полное событие:
Окей, время запустить вой проект. Вы увидите следующее:
Спасибо за прочтение. Удачи вам и вашему проекту!
Дополнительно
Web Fonts в объекте "Text box"
После установки веб-шрифта в любом текстовом объекте вы можете установить его для объекта "Text box", используя Set CSS style. Введите font-family в поле Property name и название шрифта из вашего CSS в поле Value.
Обходной путь к не загружаемым веб-шрифтам
Иногда, Web Font не загружается при старте и шрифт меняется только после смены сцены. Один из вариантов решения проблемы - создать объект "Text", установить для него веб-шрифт и уничтожит его после 0.1 секунды (используя действие Wait). Примерно, это должно выглядеть вот так:
Текст на долю секунды появится с шрифтом по умолчанию и исчезнет, но зато шрифт будет на всех остальных объектах.