Совет по обучению: использование пользовательских шрифтов с Sencha Architect

  1. Включение пользовательского шрифта из службы шрифтов
  2. Включение собственного шрифта @ font-face (local)

В те дни, когда веб-сайты были ограничены типичными шрифтами, такими как Arial, Georgia, Times и т В те дни, когда веб-сайты были ограничены типичными шрифтами, такими как Arial, Georgia, Times и т. Д., Шрифты доставлялись с компьютера пользователя. К счастью, благодаря HTML5 и CSS3 браузеры поддерживают встроенные веб-шрифты.

В этом месяце я расскажу, как использовать пользовательские шрифты в Sencha Architect. Для этого урока я буду использовать одно из начальных приложений Sencha Touch с темой по умолчанию. Однако вы также можете использовать эти советы для других приложений Sencha Touch или Ext JS.

Включение пользовательского шрифта из службы шрифтов

Если вы этого не сделали, перетащите тему « По умолчанию» в свой проект (я использовал одно из начальных приложений Sencha Touch). Примените тему по умолчанию, чтобы создать собственное расширение темы.

  1. Выберите MyDefaultTheme и нажмите кнопку scss +, чтобы добавить новый фрагмент Sass.
  2. Выберите MyDefaultTheme и нажмите кнопку scss +, чтобы добавить новый фрагмент Sass

  3. Нажмите кнопку со стрелкой вправо на ресурсе Scss, чтобы ввести свойства фрагмента кода Sass.
  4. Установите порядок компиляции в beforeVariables
  5. Установите порядок компиляции в beforeVariables

    Примечание: одна вещь, которую вы должны знать о работе с пользовательскими шрифтами, это то, что импорт шрифтов всегда должен быть в самом верху вашей таблицы стилей. Если вы не измените порядок компиляции ресурса Scss, этот фрагмент будет вставлен после того, как будут вставлены все стили темы Sencha. Это может привести к тому, что ваши пользовательские шрифты не будут видны.

  6. Служба шрифтов (или онлайн-поставщик шрифтов) - это каталог бесплатных размещенных веб-шрифтов. Это хорошо, потому что с сервисом шрифтов вам не нужно размещать шрифты локально, и, следовательно, вам не нужно иметь дело с авторскими правами на шрифты. Есть несколько популярных сервисов шрифтов, таких как Google Web Font или Typekit.
  7. Давайте использовать Google Web Font и вы можете выбрать шрифт, который вам нравится.

    Как только вы нашли нужный шрифт, нажмите кнопку « Добавить в коллекцию» .

    Как только вы нашли нужный шрифт, нажмите кнопку « Добавить в коллекцию»

    Далее нажмите вкладку «Использование». Прокрутите вниз до пункта № 3 и перейдите на вкладку @import . Затем скопируйте код, который он отображает.

    Затем скопируйте код, который он отображает

  8. Откройте Architect, в редакторе кода вставьте код шрифта, например:
  9. @ import url (http: //fonts.googleapis.com/css?family=Exo&subset=latin,latin-ext);
  10. Выберите MyDefaultTheme и нажмите вкладку «Тема» в инспекторе конфигурации.
  11. Здесь фильтр для шрифта. В Ext.Class вы можете установить семейство шрифтов . Установите для него следующее значение (в зависимости от выбранного шрифта):

Теперь вернитесь в представление «Дизайн» (если вы ничего не видите, нажмите кнопку «Обновить») и просмотрите новый шрифт.

Включение собственного шрифта @ font-face (local)

Но что, если вы хотите использовать свой собственный шрифт? Или, может быть, у вашей компании есть собственный шрифт, который вы хотите использовать. Прежде чем мы углубимся в это, позвольте мне объяснить немного больше о локальных шрифтах.

@ font-face - это метод CSS, используемый для интеграции пользовательских веб-шрифтов. При использовании системных шрифтов он выбирает шрифт, если он доступен в вашей ОС, @ font-face загружает шрифт из Интернета. К сожалению, основные браузеры не стандартизировали ни одно решение для веб-шрифтов. Таким образом, вы должны встроить несколько расширений веб-шрифтов в таблицу стилей.

Вы можете получить эти пакеты шрифтов онлайн. Например, http://www.fontsquirrel.com это веб-сайт, где вы можете скачать шрифты, 100% бесплатно для коммерческого использования.

  1. Выберите MyDefaultTheme и нажмите кнопку scss +, чтобы добавить новый фрагмент Sass.
  2. Нажмите кнопку со стрелкой вправо на ресурсе Scss, чтобы ввести свойства фрагмента кода Sass.
  3. Установите порядок компиляции в beforeVariables
  4. Теперь давайте загрузим хороший набор шрифтов с font-squirel.com на ваш жесткий диск, например:
    http://www.fontsquirrel.com/fonts/exo-2
  5. Перейдите на вкладку «Набор веб-шрифтов » и убедитесь, что в пакет включены следующие расширения: ttf, eot, woff, svg и нажмите синюю кнопку « Загрузить @ набор шрифтов» .

  6. Распакуйте zip-файл и откройте одну из обычных папок шрифтов. Проверьте прилагаемую таблицу стилей .css и скопируйте строки кода импорта.
  7. Вернитесь в Sencha Architect, в редакторе кода MyDefaultTheme, и вставьте импорт. Например:
  8. @font -face {font -family: 'exo_2.0regular'; src: url ('Exo2.0-Regular-webfont.eot'); Формат src: url ('Exo2.0-Regular-webfont.eot? #iefix') ('embedded-opentype'), формат url ('Exo2.0-Regular-webfont.woff') ('woff'), url ('Exo2.0-Regular-webfont.ttf') формат ('truetype'), url ('Exo2.0-Regular-webfont.svg # exo_2.0regular') формат ('svg'); шрифт-вес: нормальный; стиль шрифта: нормальный; }
  9. Теперь сохраните ваш проект Architect и скопируйте 4 расширения шрифта в папку ресурсов вашего проекта в вашей файловой системе; если вы хотите, вы можете создать здесь подпапку шрифтов .
  10. Поскольку мои шрифты находятся в ресурсах / fonts / , мне нужно исправить путь в моем фрагменте Architect. Sencha Architect ожидает, что шрифты будут расположены в папке / theme / . Я также переименовал имя семейства шрифтов:
  11. @ import url (http: //fonts.googleapis.com/css?family=Exo&subset=latin,latin-ext); @ font -face {font -family: 'Exo2'; src: url ('../../resources/fonts/Exo2.0-Regular-webfont.eot'); Формат src: url ('../../resources/fonts/Exo2.0-Regular-webfont.eot?#iefix') ('embedded-opentype'), url ('../../resources/fonts /Exo2.0-Regular-webfont.woff ') формат (' woff '), формат url (' ../../resources/fonts/Exo2.0-Regular-webfont.ttf ') (' truetype '), url ('../../resources/fonts/Exo2.0-Regular-webfont.svg#exo_2.0regular') формат ('svg'); шрифт-вес: нормальный; стиль шрифта: нормальный; }
  12. Выберите тему MyDefaultTheme и перейдите на вкладку « Тема ».
  13. Здесь фильтр для шрифта. В Ext.Class вы можете установить семейство шрифтов . Установите для него следующее значение: (в зависимости от выбранного вами шрифта):
  14. Скомпилируйте ваш проект и проверьте результат в вашем браузере. Вы увидите новый шрифт.

Ищете дополнительную помощь с темой для Sencha Touch? Записаться на учебный класс. В июле мы предложим продвинутый Sencha Touch онлайн тематический курс ,

Com/css?
Eot?
Com/css?
Eot?
Ищете дополнительную помощь с темой для Sencha Touch?