Rails Пользовательские шрифты не отображаются без ошибок

Question

Я некоторое время просматривал, пытаясь отладить, почему мои пользовательские шрифты в рельсах 4 не работают. Проблема, с которой я сталкиваюсь, заключается в том, что шрифты не отображаются на веб-странице, и текст не используется в шрифтах.

Я использовал инструменты для разработчиков браузеров для отладки и никаких ошибок вообще не было.

Вот application.css код для моих шрифтов:

@font-face { font-family: 'modeka'; src: url('/assets/modeka.otf'); } 
@font-face { font-family: 'flex'; src: url('/assets/flex.otf'); } 

Я создал папку под названием fonts в папке assets. Внутри папки fonts находятся оба шрифта.

Я попытался изменить src: url к src: asset-url

Я попытался добавить эти конфигурационные строки в конфиге/сред/production.rb

# Add the fonts path 
config.assets.paths << Rails.root.join('app', 'assets', 'fonts') 

# Precompile additional assets 
config.assets.precompile += %w(.svg .otf .eot .woff .ttf) 

Я попытался добавить следующий код в конфиг /application.rb

#config/application.rb 
config.assets.paths << Rails.root.join("assets", "fonts") 

Я добавил этот код также в конфиге/application.rb файл

config.assets.enabled = true 
config.assets.paths << Rails.root.join('/app/assets/fonts') 

Я также попытался добавить *= require_fonts в файл application.css.

Ничего не работает! Может кто-нибудь помочь

Answer 1

Я не знаю много о Rails, но если ваша структура папок /app/assets/fonts, то это, безусловно, ваш src неверно в вашей @font-face декларации, она должна быть url('/assets/fonts/modeka.otf')?

Answer 2

Я обычно делаю это:

1. Сохранить мои шрифты в app/assets/fonts/ каталоге

2. Добавить Rails.application.config.assets.paths << Rails.root.join('app', 'assets', 'fonts') в assets.rb файл

3. Преобразовать файл CSS в SASS/SCSS файл В этом случае application.css до application.css.scss

4. Затем в SCSS файл font-url помощник может быть использован:

   @font-face { font-family: 'modeka'; src: font-url('modeka.otf'); } @font-face { font-family: 'flex'; src: font-url('flex.otf'); }