Использование шрифтов с конвейером Rails asset

у меня есть некоторые шрифты, настроенные в моем файле Scss, например:

@font-face {
  font-family: 'Icomoon';
  src: asset-url('icoMoon.eot?#iefix', font) format('embedded-opentype'),
       asset-url('icoMoon.woff', font) format('woff'),
       asset-url('icoMoon.ttf', font)  format('truetype'),
       asset-url('icoMoon.svg#Icomoon', font) format('svg');
}

фактический файл шрифта хранятся в /app / активы / шрифты/

Я добавил config.assets.paths << Rails.root.join("app", "assets", "fonts") Мои приложения.файл rb

и источник CSS компиляции выглядит следующим образом:

@font-face {
  font-family: 'Icomoon';
  src: url(/assets/icoMoon.eot?#iefix) format("embedded-opentype"), url(/assets/icoMoon.woff) format("woff"), url(/assets/icoMoon.ttf) format("truetype"), url(/assets/icoMoon.svg#Icomoon) format("svg");
}

но когда я запускаю приложение, файлы шрифтов не найдены. Журналы:

Started GET " / активы / icoMoon.ttf " для 127.0.0.1 в 2012-06-05 23: 21: 17 +0100 Служил активов /icoMoon.ttf-404 не найден (13ms)

Почему конвейер активов не сглаживает файлы шрифтов в just / assets?

какие идеи народ?

С наилучшими пожеланиями, Нил!--5-->

дополнительная информация:

при проверке консоли rails для путей активов и assetprecompile я получаю следующее:

1.9.2p320 :001 > y Rails.application.config.assets.precompile
---
- !ruby/object:Proc {}
- !ruby/regexp /(?:\/|\|\A)application\.(css|js)$/
- .svg
- .eot
- .woff
- .ttf
=> nil



1.9.2p320 :002 > y Rails.application.config.assets.paths
---
- /Users/neiltonge/code/neiltonge/app/assets/fonts
- /Users/neiltonge/code/neiltonge/app/assets/images
- /Users/neiltonge/code/neiltonge/app/assets/javascripts
- /Users/neiltonge/code/neiltonge/app/assets/stylesheets
- /Users/neiltonge/code/neiltonge/vendor/assets/images
- /Users/neiltonge/code/neiltonge/vendor/assets/javascripts
- /Users/neiltonge/code/neiltonge/vendor/assets/stylesheets
- /Users/neiltonge/.rvm/gems/[email protected]/gems/jquery-rails-2.0.0/vendor/assets/javascripts
- /Users/neiltonge/.rvm/gems/[email protected]/gems/coffee-rails-3.2.1/lib/assets/javascripts
- /Users/neiltonge/.rvm/gems/[email protected]/gems/bourbon-1.3.0/app/assets/stylesheets
- !ruby/object:Pathname
  path: /Users/neiltonge/code/neiltonge/app/assets/fonts
 => nil

11 ответов


  1. если ваша версия Rails находится между > 3.1.0 и < 4, поместите шрифты в любую из этих папок:

    • app/assets/fonts
    • lib/assets/fonts
    • vendor/assets/fonts


    для версии рельсов > 4, вы должны поместите шрифты в .

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

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

    для версии рельсов > 4.2, это рекомендовано чтобы добавить эту конфигурацию в config/initializers/assets.rb.

    однако вы также можете добавить его в любой config/application.rb или config/production.rb

  2. объявите свой шрифт в файле CSS:

    @font-face {
      font-family: 'Icomoon';
      src:url('icomoon.eot');
      src:url('icomoon.eot?#iefix') format('embedded-opentype'),
        url('icomoon.svg#icomoon') format('svg'),
        url('icomoon.woff') format('woff'),
        url('icomoon.ttf') format('truetype');
      font-weight: normal;
      font-style: normal;
    }
    

    убедитесь, что ваш шрифт назван точно так же, как в части URL-адреса объявления. Заглавные буквы и знаки препинания имеют значение. В в этом случае шрифт должен иметь имя icomoon.

  3. если вы используете Sass или меньше с Rails > 3.1.0 (ваш файл CSS имеет .scss или


теперь вот поворот:

вы должны разместить все шрифты в app/assets/fonts/ они будет получить precompiled в постановке и производстве по умолчанию-они будут получать precompiled при нажатии на здесь.

файлы шрифтов, помещенные в vendor/assets будет не быть предварительно скомпилированы на стадии или производства по умолчанию - они будут терпеть неудачу на здесь. источник!

- @plapier, thoughtbot/бурбон

я твердо верю, что положить шрифты поставщика в vendor/assets/fonts имеет гораздо больше смысла, чем положить их в app/assets/fonts. С эти 2 линии дополнительной конфигурации это хорошо сработало для меня (на Rails 4):

app.config.assets.paths << Rails.root.join('vendor', 'assets', 'fonts')  
app.config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/

- @jhilden, thoughtbot/бурбон

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


Если вы не хотите отслеживать перемещение шрифтов вокруг:

# Adding Webfonts to the Asset Pipeline
config.assets.precompile << Proc.new { |path|
  if path =~ /\.(eot|svg|ttf|woff)\z/
    true
  end
}

вам нужно использовать font-url в вашем блоке @font-face, а не url

@font-face {
font-family: 'Inconsolata';
src:font-url('Inconsolata-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

а также эта строка в приложении.РБ, Как вы упомянули (для шрифтов в app/assets/fonts

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

вот мой подход к использованию шрифтов в трубопроводных активов:

1) Поместите весь файл шрифта под app/assets/fonts/, на самом деле вы не ограничены, чтобы положить его под fonts имя папки. Вы можете поместить любое имя вложенной папки, которое вам нравится. Е. Г. app/assets/abc или app/assets/anotherfonts. Но я настоятельно рекомендую вам положить его под app/assets/fonts/ для улучшения структуры папок.

2) из вашего файла sass, используя помощник Sass font-path запрос ваших активов шрифт такой

@font-face {
    font-family: 'FontAwesome';
    src: url(font-path('fontawesome-webfont.eot') + '?v=4.4.0');
    src: url(font-path('fontawesome-webfont.eot') + '?#iefix&v=4.4.0') format('embedded-opentype'),
         url(font-path('fontawesome-webfont.woff2') + '?v=4.4.0') format('woff2'),
         url(font-path('fontawesome-webfont.woff') + '?v=4.4.0') format('woff'),
         url(font-path('fontawesome-webfont.ttf') + '?v=4.4.0') format('truetype'),
         url(font-path('fontawesome-webfont.svg') + '?v=4.4.0#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

3) Run bundle exec rake assets:precompile от локальный компьютер и приложение.результат в CSS. Вы должны увидеть что-то вроде этого:

@font-face {
    font-family: 'FontAwesome';
    src: url("/assets/fontawesome-webfont-d4f5a99224154f2a808e42a441ddc9248ffe78b7a4083684ce159270b30b912a.eot" "?v=4.4.0");
    src: url("/assets/fontawesome-webfont-d4f5a99224154f2a808e42a441ddc9248ffe78b7a4083684ce159270b30b912a.eot" "?#iefix&v=4.4.0") format("embedded-opentype"), url("/assets/fontawesome-webfont-3c4a1bb7ce3234407184f0d80cc4dec075e4ad616b44dcc5778e1cfb1bc24019.woff2" "?v=4.4.0") format("woff2"), url("/assets/fontawesome-webfont-a7c7e4930090e038a280fd61d88f0dc03dad4aeaedbd8c9be3dd9aa4c3b6f8d1.woff" "?v=4.4.0") format("woff"), url("/assets/fontawesome-webfont-1b7f3de49d68b01f415574ebb82e6110a1d09cda2071ad8451bdb5124131a292.ttf" "?v=4.4.0") format("truetype"), url("/assets/fontawesome-webfont-7414288c272f6cc10304aa18e89bf24fb30f40afd644623f425c2c3d71fbe06a.svg" "?v=4.4.0#fontawesomeregular") format("svg");
    font-weight: normal;
    font-style: normal;
}

если вы хотите узнать больше о том, как работает конвейер активов, вы можете посетить следующее простое руководство: https://designcode.commandrun.com/rails-asset-pipeline-simple-guide-830e2e666f6c#.6lejlayk2


у меня была эта проблема на Rails 4.2 (с ruby 2.2.3) и пришлось редактировать шрифт-awesome _paths.scss частичное удаление ссылок на $fa-font-path и удаление передней косой черты. Сломалось следующее:--7-->

@font-face {
  font-family: 'FontAwesome';
  src: font-url('#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}');
  src: font-url('#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'),
    font-url('#{$fa-font-path}/fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'),
    font-url('#{$fa-font-path}/fontawesome-webfont.woff?v=#{$fa-version}') format('woff'),
    font-url('#{$fa-font-path}/fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'),
    font-url('#{$fa-font-path}/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

и следующие работы:

@font-face {
  font-family: 'FontAwesome';
  src: font-url('fontawesome-webfont.eot?v=#{$fa-version}');
  src: font-url('fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'),
    font-url('fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'),
    font-url('fontawesome-webfont.woff?v=#{$fa-version}') format('woff'),
    font-url('fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'),
    font-url('fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

альтернативой было бы просто удалить косую черту после интерполированного $fa-font-path и затем определить $fa-font-path как пустая строка или подкаталог с косой чертой (как необходимый.)

не забудьте перекомпилировать активы и перезагрузить сервер по мере необходимости. Например, при настройке пассажира:

prompt> rake assets:clean; rake assets:clobber
prompt> RAILS_ENV=production RAILS_GROUPS=assets rake assets:precompile
prompt> service passenger restart

затем перезагрузите браузер.


Я использую Rails 4.2 и не могу получить значки для ног, чтобы показать. Вместо (+) на свернутых строках и маленьких сортировочных стрелок, которые я ожидал, были показаны маленькие коробки. Изучив информацию здесь, я внес одно простое изменение в свой код: удалите каталог шрифтов в css. То есть, измените все записи css следующим образом:

src:url('fonts/footable.eot');

выглядит так:

src:url('footable.eot');

это сработало. Я думаю, Rails 4.2 уже предполагает каталог шрифтов, поэтому указание это снова в коде css делает файлы шрифтов не найти. Надеюсь, это поможет.


у меня была аналогичная проблема, когда я недавно обновил приложение Rails 3 до Rails 4. Мои шрифты не работали должным образом, как в Rails 4+, нам разрешено хранить шрифты только под . Но у моего приложения Rails 3 была другая организация шрифтов. Поэтому мне пришлось настроить приложение так, чтобы оно все еще работало с Rails 4+, имея мои шрифты в другом месте, кроме app/assets/fonts. Я пробовал несколько решений, но после того, как я нашел non-stupid-digest-assets gem, он просто сделал это так простой.

добавьте этот камень, добавив следующую строку в свой Gemfile:

gem 'non-stupid-digest-assets'

запустите:

bundle install

и, наконец, добавьте следующую строку в ваш config/инициализаторы / non_digest_assets.rb:

NonStupidDigestAssets.whitelist = [ /\.(?:svg|eot|woff|ttf)$/ ]

вот именно. Это хорошо решило мою проблему. Надеюсь, это поможет кому-то, кто столкнулся с подобной проблемой, как я.


в моем случае исходный вопрос был с помощью asset-url без вместо обычного url свойство css. Используя asset-url закончил работу на меня в Heroku. Плюс установка шрифтов в , а вызов asset-url('font.eot') без добавления какой-либо подпапки или любой другой конфигурации к нему.


Если у вас есть файл под названием scaffolds.стиль CSS.scss, тогда есть шанс, что это переопределяет все пользовательские вещи, которые вы делаете в других файлах. Я прокомментировал этот файл, и внезапно все сработало. Если в этом файле нет ничего важного, вы можете просто удалить его!


просто поместите шрифты в папку app/assets/fonts и установите путь автоматической загрузки, когда приложение начнет писать код в приложении.rb

config.активы.пути и

затем используйте следующий код в CSS.

@font-face {

 font-family: 'icomoon';
 src: asset-url('icomoon.eot');
 src: asset-url('icomoon.eot') format('embedded-opentype'),
      asset-url('icomoon.woff') format('woff'),
      asset-url('icomoon.ttf') format('truetype'),
      asset-url('icomoon.svg') format('svg');
 font-weight: normal;
 font-style: normal;

}

попробуйте.

спасибо