Атрибуты шрифтов Heroku не работают

Ответ 1

Активы, подобные шрифтам, будут работать на разработку, но не на производство, если вы используете обычный старый CSS для поиска ваших активов, а не для помощников по конвейеру активов. Rails 4 добавила изменения в конвейер активов, чтобы побудить людей использовать его должным образом, а не использовать старый метод привязки ресурсов css.

Чтобы решить эту проблему, вам нужно использовать помощники конвейеров нового ресурса, чтобы указать на кешированные версии ваших шрифтов с отпечатками пальцев. Вместо url (который не использует конвейер активов) вам нужно использовать font-url (который его использует). Для этого вам может понадобиться использовать Sass или встроить ERB в таблицу стилей.

Пример (с использованием SCSS):

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

Смотрите здесь: http://guides.rubyonrails.org/asset_pipeline.html#coding-links-to-assets

Ответ 2

В свете комментариев, полученных по этому ответу (и ненужных downvotes), я внесла поправки в свой ответ следующим образом:

Кажется, Rails теперь создал способ обработки шрифтов в папке с ресурсами. Он называется font-path и работает следующим образом:

Если вы добавите специальный шрифт в папку /assets/fonts, вы можете использовать font-path для доступа к файлам внутри. Затем это можно использовать в ваших таблицах стилей и других активах с помощью помощника font-path:

|-app/
|---assets/
|-----fonts/
|-----images/
|-----javascripts/
|-----stylesheets/

@font-face {
  font-family:'icofonts';
  src:font-url('icofonts.eot');
  src:font-url('icofonts.eot?#iefix') format('embedded-opentype'),

  ...
} 

Это работает для предварительно скомпилированных активов (что в любом случае Heroku) и статических активов. Если вы хотите, чтобы пре-Rails 4 мог достичь этого, обратитесь к моему ответу ниже:

У нас есть шрифты, работающие на Heroku здесь: http://firststop.herokuapp.com (он еще в демо)

Вот наш CSS для него:

#assets/application.css
/*-- Akagi Font --*/
@font-face {
    font-family: 'akagi';
    src: url('fonts/akagi-th-webfont.eot'),
    src: url('fonts/akagi-th-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/akagi-th-webfont.woff') format('woff'),
         url('fonts/akagi-th-webfont.ttf') format('truetype'),
         url('fonts/akagi-th-webfont.svg#akagithin') format('svg');
    font-weight: 300;
    font-style: normal;

}
@font-face {
    font-family: 'akagi';
    src: url('fonts/akagi-bk-webfont.eot');
    src: url('fonts/akagi-bk-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/akagi-bk-webfont.woff') format('woff'),
         url('fonts/akagi-bk-webfont.ttf') format('truetype'),
         url('fonts/akagi-bk-webfont.svg#akagibook') format('svg');
    font-weight: 400;
    font-style: normal;

}
@font-face {
    font-family: 'akagi';
    src: url('fonts/akagi-sb-webfont.eot');
    src: url('fonts/akagi-sb-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/akagi-sb-webfont.woff') format('woff'),
         url('fonts/akagi-sb-webfont.ttf') format('truetype'),
         url('fonts/akagi-sb-webfont.svg#akagisemibold') format('svg');
    font-weight: 500;
    font-style: normal;

}

Мы помещаем наши шрифты в /stylesheets/fonts folder

Мы просто делаем стандартный материал precompile fonts, чтобы заставить CSS работать на Heroku, и он работает. Я подозреваю, что ваши пути неверны. Возможно, попробуйте переместить свой каталог шрифтов в папку/assets/stylesheets:)

Ответ 3

Собственно, я просто попробовал решение, предложенное в этом comment, и оно отлично работало. Кажется, вам нужно только изменить регулярное выражение для команды precompile, чтобы Heroku правильно нашел этот актив.

то есть. измените config.assets.precompile += %w( .svg .eot .woff .ttf ) на config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/.

Изменить. Также может потребоваться добавить RAILS_ENV=production при выполнении задачи rake assets:precompile, согласно документам Heroku.

Ответ 4

Попробуйте удалить /assets/ со всех ваших путей к шрифтам.

@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;
}

Также попробуйте удалить scaffolds.css, если он находится в assets/stylesheets.

Ответ 5

Я решил проблему, используя комбинацию всех ответов и комментариев. В моем примере используются значки шрифтов Foundation.

В вашем файле application.rb добавьте следующее:

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

Переименуйте файл application.css в application.css.scss и используйте директивы font-url и asset-path:

@font-face {
  font-family: "foundation-icons";
  src: font-url( asset-path("foundation-icons.eot") );
  src: font-url( asset-path("foundation-icons.eot?#iefix") ) format("embedded-opentype"),
       font-url( asset-path("foundation-icons.woff") ) format("woff"),
       font-url( asset-path("foundation-icons.ttf") ) format("truetype"),
       font-url( asset-path("foundation-icons.svg#fontcustom") ) format("svg");
  font-weight: normal;
  font-style: normal;
}

Ответ 6

Рельсы 4

# config/application.rb
config.assets.paths << Rails.root.join("app", "assets", "fonts")
config.assets.precompile += %w(.svg .eot .woff .ttf)

# app/assets/stylesheets/foundation-icons.css.scss
@font-face {
  font-family: "foundation-icons";
  src: asset-url("foundation-icons.eot");
  src: asset-url("foundation-icons.eot?#iefix") format("embedded-opentype"),
       asset-url("foundation-icons.woff") format("woff"),
       asset-url("foundation-icons.ttf") format("truetype"),
       asset-url("foundation-icons.svg#fontcustom") format("svg");
  font-weight: normal;
  font-style: normal;
}

Ответ 7

• Переименуйте файл .css в .css.erb
• Замените все url('/assets/icomoon.eot') на url(<%= asset_path 'icomoon.eot' %>) и т.д.

Вы можете добиться того же результата, преобразовывая свой файл css в SASS/SCSS и используя font-url() помощник вместо url().

Я пробовал это с Rails 4, и он работает даже без битов, которые вы добавили в production.rb/application.rb.

Ответ 8

Вам не нужно включать каталог /assets/fonts/ в config.assets.paths. Согласно документации все каталоги, включенные в app/assets, lib/assets или vendor/assets, автоматически загружаются.

http://guides.rubyonrails.org/asset_pipeline.html#asset-organization

Активы трубопровода могут быть размещены внутри приложения в одном из трех местоположений: app/assets, lib/assets или vendor/assets.

[...]

Помимо стандартных путей assets/* в конвейер можно добавить дополнительные (полностью квалифицированные) пути в config/application.rb.

config.assets.paths << Rails.root.join("lib", "videoplayer", "flash")

Попробуйте запустить Rails.application.class.config.assets.paths в консоли, и вы увидите массив всех каталогов внутри /assets. если вы добавите другой каталог и перезапустите консоль, он будет автоматически включен внутри массива, и контент будет использоваться как активы.

Вам даже не нужно config.assets.precompile += %w( .svg .eot .woff .ttf ), потому что все файлы, отличные от js-css, уже включены через стандартный соединитель Proc.

http://guides.rubyonrails.org/asset_pipeline.html#precompiling-assets

Соединитель по умолчанию для компиляции файлов включает файлы application.js, application.css и все файлы, отличные от JS/CSS (это будет автоматически включать все изображения):

[ Proc.new { |path| !%w(.js .css).include?(File.extname(path)) }, /application.(css|js)$/ ]

Попробуйте добавить только каталог шрифтов в app/assets/, оставив всю конфигурацию по умолчанию и развернув приложение на heroku.

Ответ 9

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

rake assets:precompile RAILS_ENV=production

и обязательно ссылайтесь на свои ресурсы в файлах css с помощью asset_path вспомогательного метода.

как:

src: font-url('<%= asset_path("foundation-icons.eot")%>');