Хотите использовать Android Roboto Font? Проверьте этот пост.
Часто мы, разработчики, недооцениваем ценность, которую правильный шрифт добавляет внешнему виду наших приложений. Мы обычно в порядке с использованием системного шрифта. Проблема с этим в приложении PhoneGap заключается в том, что системный шрифт может сильно отличаться от одного устройства к другому, но, черт возьми, он может отличаться от одной версии операционной системы к другой, например, переход с iOS 6 на 7 Так что просто зависеть от системного шрифта не может быть хорошей идеей.
Шрифты, как и все ценное, не являются бесплатными. Хотя они могут быть по разумной цене, если вы независимый разработчик, даже самый недорогой шрифт может показаться дорогим. К счастью, есть Google Fonts. Google собрал большую коллекцию бесплатных шрифтов. Теперь обычно вы просто ссылаетесь на эти шрифты на своем веб-сайте и покончите с этим. Вы также можете сделать это в приложении PhoneGap, но это не будет идеальным пользовательским интерфейсом. Приложение PhoneGap не должно чрезмерно зависеть от Интернета, и драгоценные миллисекунды, которые требуются для загрузки шрифта на устройство пользователя, могут быть слишком большими для многих пользователей. Но вы можете скачать шрифт и встроить его в свое приложение. Таким образом, вы можете иметь красивый интерфейс, который также быстр.
Google предоставляет нам три различных способа доступа к шрифту из Интернета: <link>, @import и JavaScript, но нет возможности напрямую загрузить его. Так что я не уверен, является ли это кошерным, но я не могу придумать логическую причину, почему это не будет.
1. Выберите свой шрифт
Первое, что вам нужно сделать, это выбрать свой шрифт. Перейдите к
Google Fonts . Введите название типа шрифта или стиля, который вас интересует. Как только вы нашли шрифт, нажмите кнопку «Добавить в коллекцию». Затем нажмите кнопку «Использовать», расположенную в нижней правой части страницы. Затем выберите ваши стили и дополнительные наборы символов, которые вам могут понадобиться.
2. Получить информацию @import для вашего шрифта
Прокрутите вниз до раздела «3. Добавьте этот код на ваш сайт:» и перейдите на вкладку @import. Скопируйте URL из оператора @import, указав всю ссылку, включая «http: //», но не включая закрывающую скобку.
3. Просмотр кода загрузки
Скопируйте URL в ваш браузер и нажмите возврат / ввод. В Chrome это показывает страницу заявления @ font-face в браузере. Я не уверен, будет ли это работать так же в других браузерах, если это не так, попробуйте в Chrome. Отсюда вам нужно две вещи: сам оператор и URL для фактического шрифта. Скопируйте URL из строки «src:» на другую вкладку браузера. Обязательно включите все, начиная с «http: //» и заканчивая расширением «.woff».
4. Скачайте и переименуйте шрифт
Вставьте URL в другую вкладку браузера и нажмите Return / Enter. Это приведет к загрузке шрифта на ваш компьютер. На данный момент у него будет действительно длинное и прикольное имя. Я предлагаю изменить имя на более дружественное человеку, такое как имя, указанное в локальном атрибуте строки «src:».
local('SourceSansPro-ExtraLight')
5. Add the font to your app
Now copy the font into your app. I usually put all of my fonts together in a font directory.
6. Добавьте шрифт к вашему CSS
Добавьте шрифт в ваш файл CSS. Оператор @ font-face дает нам всю информацию, которая нам нужна для файла CSS. Скопируйте всю информацию со страницы @ font-face в начало вашего CSS-файла. Удалите локальные атрибуты из строки «src:» и измените URL так, чтобы он был относительным путем к файлу шрифта. Мины выглядят так:
формат src: url (‘../ font / SourceSansPro-ExtraLight.woff’) (‘woff’);
Вот снимок экрана моих модификаций CSS и макета каталога моих приложений:
Резюме
Снимок экрана в верхней части статьи показывает, как выглядит мое приложение, которое является клоном PhoneGap калькулятора iPhone, с добавлением Google Font: Source Sans Pro — Extra light. На рисунке ниже показано, как это выглядит без указания шрифта. Я думаю, что это делает его намного лучше.
