Использование @font-face с приложением Rails 3.1?

У меня возникли проблемы с использованием следующего объявления @font-face для работы с моим приложением Rails 3.1. Я помещал шрифты в Asset Pipeline в свою собственную папку под названием "Шрифты" вместе с images и stylesheets и javascripts

Вот объявление, которое я использовал (созданный Font Squirrel.)

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

Кто-нибудь успешно использует @font-face в своем приложении Rails 3.1?

Обновление

Я только что прочитал этот поток http://spin.atomicobject.com/2011/09/26/serving-fonts-in-rails-3-1/, который сказал, чтобы в объявлениях было изменено url на font-url. Кажется, что это не работало, к сожалению.

ОТВЕТЫ

Ответ 1

Вам нужно добавить папку в путь к ресурсам (в файл config/application.rb), см. Rails Guides

config.assets.paths << "#{Rails.root}/app/assets/fonts"

И вы должны использовать помощник asset_path:

src: url('<%= asset_path('Chunkfive-webfont.eot') %>');

Ответ 2

Я знаю, что это старый вопрос, но я просто наткнулся на эту проблему с помощью rails 3.2, и после прочтения ссылки на документацию, опубликованную ранее, не было необходимости редактировать application.rb. Все, что мне нужно было сделать, это сделать следующее в моей таблице стилей (используя sass)

@font-face {
    font: {
       family: 'Junction';
       weight: 'normal';
       style: 'normal';
    }
    src: asset-url('Junction-webfont.eot', font);
    src: asset-url('Junction-webfont.eot', font) format('embedded-opentype'),
         asset-url('Junction-webfont.woff', font) format('woff'),
         asset-url('Junction-webfont.ttf', font) format('truetype'),
         asset-url('Junction-webfont.svg#JunctionRegular', font) format('svg')
}

Поэтому вместо использования url я использовал общий ресурс-url, который принимает 2 аргумента, файл и класс активов, в данном случае "шрифт".

Ответ 3

Из Rails 3.1 и выше вы можете напрямую вызвать font-url. Вот так:

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

Ожидайте, что ваш последний css будет выглядеть следующим образом:

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

Обычно работает:)

Ответ 4

Использование Rails 4.0 (не знаю, является ли это конкретным для 4, но в любом случае), я смог работать с url(font_path('font-name.ttf')). Добавление пути шрифтов к пути к ресурсам также не требовалось (config.assets.paths << "#{Rails.root}/app/assets/fonts").

Итак, для меня это то, что сработало:

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

Ответ 5

Я только что обновил эту статью в блоге Atomic Object Spin. Вот CSS-преобразование (вы смотрели синтаксис Sass)

@font-face {
  font-family: "Merriweather";
  src: url(/assets/merriweather-black-webfont.eot);
  src: local("Merriweather Heavy"), local("Merriweather-Heavy"), url(/assets/merriweather-black-webfont.eot?#iefix) format("embedded-opentype"), url(/assets/merriweather-black-webfont.woff) format("woff"), url(/assets/merriweather-black-webfont.ttf) format("truetype"), url(/assets/merriweather-black-webfont.svg#MerriweatherHeavy) format("svg");
  font-weight: 900;
  font-style: normal;
}

Ответ 6

Я использую 3.1.1 и имею свои шрифты под вендором/активами/магазинами (реализация Spree). Решения, приведенные здесь, не сработали для меня, и я в конечном итоге просто попытался, что оказалось моим решением - не нужно было

Вот пример моего атрибута src для EOT:

src: url('1617A5_4.eot');

Я немного смущен этим, но похоже, что когда активы скомпилированы, все активы скопированы в их родительскую папку (активы/хранилище/), после чего таблица стилей может просто поднять их.

Ответ 7

Пока это поздно, вы можете использовать сочетание Compass +font-face, чтобы избежать всех этих проблем. Mixin помогает вашей жизни легче

  • Не помните ужасные оговорки о традиционном прочтении шрифтов

  • Он внутренне обрабатывает объявления url_helper и формата

  • Намного легче запомнить

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

   
+font-face("#{$font-name}",
  font-files("#{$font-name}.woff", woff, 
  "#{$fontFileName}.ttf", ttf, 
  "#{$fontFileName}.svg", svg), "#{$fontFileName}.eot", normal, normal);