Официальный способ добавления пользовательских шрифтов в Rails 4?

Я изучаю, как добавить пользовательские шрифты в мое приложение Rails, например. добавив папку fonts в папку с ресурсами - и я не могу найти "официальный" способ Rails, как это сделать.

Да, здесь есть много вопросов/ответов о SO по этому поводу, все, похоже, с их собственными хаками. Но разве такая обычная практика не подпадает под известную "конвенцию над конфигурацией" Rails?

Или, если я пропустил это - где ссылка на документацию о том, как организовать шрифты в приложении Rails?

Ответы

Ответ 1

Да, данная ссылка объяснит это хорошо, однако, если вам нужно другое подробное объяснение, то вот оно

Во-первых, чтобы использовать пользовательские шрифты в вашем приложении, вам нужно скачать файлы шрифтов, вы можете попробовать https://www.1001freefonts.com/ и найти шрифты

Немногие из наиболее популярных форматов файлов шрифтов - это, в основном,.otf (формат открытого типа).ttf (формат истинного типа).woff (формат открытого веб-шрифта)
Вы можете переместить загруженные шрифты в папку вашего приложения в app/assets/fonts/
После загрузки файла вам нужно "объявить" шрифты, которые вы будете использовать в вашем CSS, вот так
```
@font-face {
  font-family: "Kaushan Script Regular";
  src: url(/assets/KaushanScript-Regular.otf) format("truetype");
}
```
Наконец, вы можете использовать семейство шрифтов, которое вы только что объявили, где угодно
```
#e-registration {
  font-family: "Kaushan Script Regular";
}
```

Надеюсь это поможет.

Ответ 2

Только что сделал это...

Загрузите и сохраните файлы шрифтов (eot, woff, woff2...) в каталоге assets/fonts/
1. В вашем config/application.rb добавьте эту строку config.assets.paths << Rails.root.join("app", "assets", "fonts")

Что он делает, так это то, что он прекомпилирует вашу папку со шрифтами так же, как это делается по умолчанию с вашими изображениями, таблицами стилей и т.д.

и убедитесь, что эта строка установлена в true config.assets.enabled = true

В вашем sass/scss или даже в строке с <script>

@font-face {   font-family: 'Bariol Regular';   src:
font-url('Bariol_Regular_Webfont/bariol_regular-webfont.eot');  
src:
font-url('Bariol_Regular_Webfont/bariol_regular-webfont.eot?iefix')
format('eot'),  
font-url('Bariol_Regular_Webfont/bariol_regular-webfont.woff')
format('woff'),  
font-url('Bariol_Regular_Webfont/bariol_regular-webfont.ttf')
format('truetype'),  
font-url('Bariol_Regular_Webfont/bariol_regular-webfont.svg#webfont3AwWkQXK')
format('svg');   font-weight: normal;   font-style: normal; }

Обратите внимание, что вы должны использовать помощник по font-url вместо css ' url для устранения отпечатков, сделанных Rails, когда он прекомпилирует ресурсы

Наконец, установите семейство шрифтов в ваших файлах CSS

body {
   font-family: 'Bariol Regular', serif;
}

БЕСПЛАТНЫЙ СОВЕТ: При этом лучше всего с точки зрения производительности настроить JS, чтобы эти шрифты загружались асинхронно. Проверьте этот загрузчик: https://github.com/typekit/webfontloader

Ответ 3

У меня были некоторые проблемы с подходами, перечисленными выше, потому что производственный css не указывал на скомпилированный шрифт ttf, поэтому я успешно использовал этот альтернативный подход, заимствованный из https://gist.github.com/anotheruiguy/7379570:

Помещает все файлы шрифтов в assets/stylesheets/fonts. например assets/stylesheets/fonts/digital_7.ttf.

Я определил в файле .scss, который мы используем:

@font-face {
    font-family: 'Digital-7';
    src: asset-url('fonts/digital_7.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

Я использовал собственный шрифт в других файлах .scss:
```
.digital-font {
    font-family: 'Digital-7', sans-serif;
    font-size: 40px;
}
```

Это говорит о том, что гораздо более простой способ сделать это - поместить определение шрифта (digital_7_mono.ttf в этом примере) на отдельный сайт.

Если вы используете Cloudfront, например, в каталоге Cloudfront под названием my_path, загрузите файлы шрифтов, затем определите файл css (например, digital_fonts.css)

@font-face {
  font-family: 'Digital-7-Mono';
  font-weight: normal;
  font-style: normal;
  src: local('Digital 7 Mono'), local('Digital-7-Mono'), url('https://mycloudfront_site.com/my_path/digital_7_mono.ttf') format('truetype');
}

В вашем html внутри тега <head> добавьте:

Ответ 4

Единственный способ, который работал для меня, был таким:

@font-face {
  font-family: 'Vorname';
  src: asset-url('Vorname.otf') format('truetype'),
       asset-url('Vorname.ttf') format('truetype');
}