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

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

32 голосов
/ 02 ноября 2011

У меня проблемы с использованием следующей декларации @font-face для работы с моим приложением Rails 3.1. Я поместил шрифты в конвейер активов в его собственную папку под названием «Шрифты» рядом с 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 в объявлениях. К сожалению, это тоже не сработало.

Ответы [ 7 ]

43 голосов
/ 02 ноября 2011

Необходимо добавить папку в путь к ресурсам (к файлу config/application.rb), см. Руководства по Rails 

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

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

src: url('<%= asset_path('Chunkfive-webfont.eot') %>');
41 голосов
/ 13 апреля 2012

Я знаю, что это старый вопрос, но я наткнулся на эту проблему с 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 аргумента, файл и класс ресурсав данном случае «шрифт».

14 голосов
/ 03 декабря 2012

Из 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;
}

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

6 голосов
/ 04 июля 2013

Используя 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;
}
1 голос
/ 02 ноября 2011

Я только что обновил эту статью в Spin блоге Atomic Object.Вот преобразованный 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;
}
0 голосов
/ 14 октября 2013

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

* * * * * * * * * * * * * * * * * * * * * * * * * * *] *для вас

Гораздо проще запомнить

Заявлено, господа и господа, следующим образом: 

+font-face("#{$font-name}",
  font-files("#{$font-name}.woff", woff, 
  "#{$fontFileName}.ttf", ttf, 
  "#{$fontFileName}.svg", svg), "#{$fontFileName}.eot", normal, normal);
0 голосов
/ 06 декабря 2011

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

не было необходимости. Вот пример моего атрибута src для EOT: 

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

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

...