web-dev-qa-db-fra.com

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

Je ne parviens pas à utiliser la déclaration @font-face suivante pour utiliser mon application Rails 3.1. J'ai placé les polices dans le pipeline d'actifs dans son propre dossier appelé "Polices", à côté de images et stylesheets et javascripts.

Voici la déclaration que j'ai utilisée (générée par 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;
}

Quelqu'un a utilisé avec succès @ font-face sur son application Rails 3.1?

Mettre à jour

Je viens de lire ce fil http://spin.atomicobject.com/2011/09/26/serving-fonts-in-Rails-3-1/ qui disait de changer url en font-url dans les déclarations. Cela n'a pas semblé fonctionner non plus malheureusement.

csscss3ruby-on-rails-3.1font-facesass
32
pruett

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

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

Et vous devriez utiliser l’assistant asset_path:

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

Je sais que la question est ancienne, mais je suis tombé sur ce problème avec 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 j'avais à 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')
}

Donc, au lieu d’utiliser url, j’ai utilisé le générique asset-url, qui prend 2 arguments, le fichier et la classe d’actifs, dans ce cas-ci 'font'. 

41
Greg Stewart

À partir de 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 :)

14
Alvaro Lourenço

En utilisant Rails 4.0 (je ne sais pas si cela est spécifique à 4, mais de toute façon), je n’ai pu que le faire fonctionner avec url(font_path('font-name.ttf')). L’ajout du chemin des polices au chemin des ressources n’était pas nécessaire non plus (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;
}
6
rachel

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;
}
1
Jared

Pendant que cela est en retard, vous pouvez utiliser la combinaison +font-face de Compass pour éviter tous ces problèmes. Le mixin vous facilite la vie en 

  1. Ne vous souvenez pas des terribles mises en garde de la décadération traditionnelle des polices 

  2. Il gère en interne url_helper et les déclarations de format pour vous 

  3. C'est beaucoup plus facile à retenir 

Il est déclaré de la manière suivante madame et messieurs: 

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

J'utilise 3.1.1 et mes polices sont classées sous vendor/assets/store (implémentation Spree). Les solutions proposées ici ne fonctionnaient pas pour moi et j’ai finalement juste essayé d’essayer de trouver ma solution: il n’était pas nécessaire de

Voici un exemple de mon attribut src pour EOT:

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

Cela me laisse un peu perplexe, mais il semble qu'une fois les actifs compilés, tous les actifs sont copiés dans leur dossier parent (assets/store /), à quel moment la feuille de style peut simplement les récupérer.

0
David