Шрифты Souce Sans Pro не работают над приложением Rails для разработки - PullRequest
Новая
       44

Шрифты Souce Sans Pro не работают над приложением Rails для разработки

0 голосов
/ 24 января 2019

Я создаю приложение rails, и оно должно использовать шрифт Source Sans Pro. Я не могу импортировать шрифт в тег HTML (потому что этот процесс увеличивает время загрузки страницы), для этого я скачал .ttf шрифты на сайтах шрифтов Google (только обычные, светлые и полужирные шрифты).

Шрифт просто не работает, резервный sans serif выполняется, я поместил ttf's файлы в app/assets/fonts/ dir, добавил к моему assets.rb следующий код: 

Rails.application.config.assets.paths << Rails.root.join("app", "assets", "fonts", "node_modules")

Rails.application.config.assets.precompile << /\.(?:svg|eot|woff|ttf)\z/

В моем app/assets/stylesheets/_fonts.scss у меня есть следующий код: 

@font-face {
  font-family: 'Source Sans Pro';
  src: asset-url('SourceSansPro-Regular.ttf');
  src: asset-url('SourceSansPro-Regular.ttf') format('ttf'),
       asset-url('SourceSansPro-Light.ttf') format('ttf'),
       asset-url('SourceSansPro-SemiBold.ttf') format('ttf');
  font-weight: normal;
  font-style: normal;
}

в global.scss файле, у меня есть: 

* {
  font-family: 'Source Sans Pro', sans-serif;
}

все файлы .scss импортируются в файл application.scss: 

@import 'fonts';
@import 'base/globals.scss';

В консоли браузера не отображается ни одной ошибки, но при визуализации шаблона шрифт Source Sans Pro не работает, а откат sans-serif отображается. Пожалуйста, как мне правильно импортировать и использовать загруженные шрифты Google?

1 Ответ

0 голосов
/ 24 января 2019

Форматы шрифтов (EOT, TTF, WOFF, SVG, WOFF2 ...) Есть так много вариантов! К сожалению, несмотря на огромное разнообразие форматов, не существует ни одного, который бы работал во всех браузерах. Что это значит? То, что вам придется использовать несколько форматов шрифтов, чтобы обеспечить согласованность. ссылка по этой ссылке

Вот пара шагов для настройки шрифта Google (включая исправления для ваших настроек)

  1. поместите файл 3 шрифтов (eot, svg и ttf) в app / assets / fonts / notes: К сожалению, Google просто предоставляет ttf из google font web , но вы можете скачать его через github raw или через google font herou приложения выберите имя шрифта и загрузите, вот ссылка на источник без sans pro

  2. вызвать файл шрифта с этим scss (например, app / assets / stylesheets / fonts.scss), здесь ваши настройки отличаются . 

    @font-face {
    font-family: 'Source Sans Pro';
    src: asset-url('source-sans-pro-v11-latin-regular.eot');
    src: asset-url('source-sans-pro-v11-latin-regular.eot') format('embedded-opentype'),
           asset-url('source-sans-pro-v11-latin-regular.woff') format('woff'),
           asset-url('source-sans-pro-v11-latin-regular.ttf') format('truetype'),
           asset-url('source-sans-pro-v11-latin-regular.svg#Source Sans Pro') format('svg');
    font-weight: normal;
    font-style: normal;
}

  3. Назовите имя семейства шрифтов из вашего другого класса (base / globals.scss) 

    * {
  font-family: 'Source Sans Pro', sans-serif;
}

  4. выполните импорт через ваш app / assets / application.scss (здесь два исправления для вашей проблемы не используют _fonts.scss, а fonts.scss и импортируют с fonts.scss вместо шрифтов) 

    @import 'fonts.scss';
# make sure your call fonts.scss first before you use it
@import 'base/globals.scss';
...