Vous utilisez @ font-face avec l'application Rails 3.1?

Question

J'ai de la difficulté à l'aide de la suite de @font-face déclaration de travailler avec mes Rails 3.1 application. J'ai mis les polices de caractères dans l'Asset Pipeline dans son propre dossier appelé "Polices" aux côtés images et stylesheets et javascripts

Voici la déclaration que j'ai utilisé (générée par la Police de l'Écureuil.)

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

Quelqu'un réussi à utiliser @font-face sur leurs Rails 3.1 application?

Mise à jour

Je viens de lire ce fil http://spin.atomicobject.com/2011/09/26/serving-fonts-in-rails-3-1/ qui dit changement url de font-url dans les déclarations. Qui n'a pas l'air de fonctionner soit malheureusement.

Answer 1

Vous devez ajouter le dossier au chemin des ressources (dans le fichier config/application.rb ), voir Rails Guides

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

Et vous devez utiliser l'aide asset_path :

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

Answer 2

Je sais que c'est une vieille question, mais je suis juste tombé sur ce problème avec les rails 3.2, et après avoir lu le lien vers la documentation publiée précédemment, il n'était pas nécessaire de modifier le fichier application.rb. Tout ce que je devais faire était de faire ce qui suit dans ma feuille de style (en utilisant 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')
}
 

Ainsi, au lieu d'utiliser l'URL, j'ai utilisé l'URL d'actif générique, qui prend 2 arguments, le fichier et la classe d'actif, dans ce cas, la «police».

Answer 3

Depuis Rails 3.1 et supérieur, vous pouvez appeler directement font-url . Comme ça:

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

Attendez-vous à ce que votre CSS final ressemble à ça:

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

Fonctionne généralement :)

Answer 4

En utilisant Rails 4.0 (je ne sais pas si cela est spécifique à 4, mais de toute façon), je n'ai pu le faire fonctionner qu'avec url(font_path('font-name.ttf')) . L'ajout du chemin des polices au chemin des ressources n'était pas non plus nécessaire ( config.assets.paths << "#{Rails.root}/app/assets/fonts" ).

Donc, pour moi, c'est ce qui a fonctionné:

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

Answer 5

Je viens de mettre à jour cet article sur le blog Spin d'Atomic Object. Voici le CSS converti (vous regardiez la syntaxe 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;
}