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

Ответ 1

• Если вы находитесь на Rails > 3.1.0 и < 4, вы можете просто разместить свои шрифты в папках app/assets/fonts, lib/assets/fonts или vendor/assets/fonts.

  Если вы находитесь в Rails 4+, вы можете разместить свои шрифты только в папке app/assets/fonts.

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

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

  Если вы используете Rails 4.2+, рекомендуется добавить эту конфигурацию в файл config/initializers/assets.rb.

  Если вы этого не сделали, добавьте его в файл application.rb или production.rb.

• Объявите свой шрифт в своем 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.

• Если вы используете Sass или Less with Rails 3.1.0+ (поэтому ваш файл css имеет расширение .scss или .less), измените url(...) в объявлении шрифта на font-url(...).

  Если вы этого не сделаете, тогда ваш файл css должен иметь расширение .css.erb, а объявление шрифта должно быть изменено на url('<%= asset_path(...) %>').

  Кроме того, если вы используете Rails 3.2.1+, вы можете использовать font_path(...) вместо asset_path(...). Этот помощник делает то же самое, но это немного более понятно.

• Наконец, используйте свой шрифт в своем CSS, как вы его объявили в части font-family. Поскольку он был объявлен заглавным, вы можете использовать его следующим образом:

  font-family: 'Icomoon';
  

Ответ 2

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

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

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

- @plapier, thinkbot/bourbon

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

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

- @jhilden, thinkbot/bourbon

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

Ответ 3

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

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

Ответ 4

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

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

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

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

Ответ 5

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

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

2) Из вашего sass файла, используя sass helper 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) Запустите bundle exec rake assets:precompile с вашего локального компьютера и посмотрите ваш результат application.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

Ответ 6

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

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

выглядеть следующим образом:

src:url('footable.eot');

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

Ответ 7

У меня была проблема с Rails 4.2 (с ruby ​​2.2.3), и мне пришлось отредактировать частичное удаление шрифта _paths.scss, чтобы удалить ссылки на $fa-font-path и удалить ведущую косую черту. Было нарушено следующее:

@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

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

Ответ 8

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

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

gem 'non-stupid-digest-assets'

Затем запустите:

bundle install

И, наконец, добавьте следующую строку в файл config/initializers/non_digest_assets.rb:

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

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

Ответ 9

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

Ответ 10

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

Ответ 11

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

config.assets.paths < Rails.root.join( "приложение", "активы", "шрифты" ) и

затем используйте следующий код в 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;

}

Попробуйте.

Спасибо