À l’aide de polices avec pipeline actif de Rails

Question

J'ai quelques polices de caractères configuration de mon fichier Scss comme suit:

@font-face {
  font-family: 'Icomoon';
  src: asset-url('icoMoon.eot?#iefix', font) format('embedded-opentype'),
       asset-url('icoMoon.woff', font) format('woff'),
       asset-url('icoMoon.ttf', font)  format('truetype'),
       asset-url('icoMoon.svg#Icomoon', font) format('svg');
}

La réelle fichier de police sont stockés dans /app/assets/fonts/

J'ai ajouté config.assets.paths << Rails.root.join("app", "assets", "fonts") de ma demande.rb fichier

et la compilation de la source CSS est comme suit:

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

Mais quand je lance l'application les fichiers de police ne sont pas trouvés. Les logs:

Commencé à OBTENIR "/assets/icoMoon.ttf" pour 127.0.0.1 à 2012-06-05 23:21:17 +0100 Servi actif /icoMoon.ttf - 404-Non Trouvé (13ms)

Pourquoi n'est-ce pas l'asset pipeline de l'aplatissement de la police de caractères des fichiers en /actifs?

Toutes les idées de personnes?

Cordialement, Neil

Infos supplémentaires:

Lors de la vérification de la console rails pour les actifs chemins et assetprecompile je reçois le texte suivant:

1.9.2p320 :001 > y Rails.application.config.assets.precompile
---
- !ruby/object:Proc {}
- !ruby/regexp /(?:\/|\\|\A)application\.(css|js)$/
- .svg
- .eot
- .woff
- .ttf
=> nil



1.9.2p320 :002 > y Rails.application.config.assets.paths
---
- /Users/neiltonge/code/neiltonge/app/assets/fonts
- /Users/neiltonge/code/neiltonge/app/assets/images
- /Users/neiltonge/code/neiltonge/app/assets/javascripts
- /Users/neiltonge/code/neiltonge/app/assets/stylesheets
- /Users/neiltonge/code/neiltonge/vendor/assets/images
- /Users/neiltonge/code/neiltonge/vendor/assets/javascripts
- /Users/neiltonge/code/neiltonge/vendor/assets/stylesheets
- /Users/neiltonge/.rvm/gems/ruby-1.9.2-p320@neiltonge/gems/jquery-rails-2.0.0/vendor/assets/javascripts
- /Users/neiltonge/.rvm/gems/ruby-1.9.2-p320@neiltonge/gems/coffee-rails-3.2.1/lib/assets/javascripts
- /Users/neiltonge/.rvm/gems/ruby-1.9.2-p320@neiltonge/gems/bourbon-1.3.0/app/assets/stylesheets
- !ruby/object:Pathname
  path: /Users/neiltonge/code/neiltonge/app/assets/fonts
 => nil

Answer 1

1. Si vous êtes sur des Rails >3.1.0 et <4, vous pouvez simplement placer vos polices dans le dossier app/assets/fonts, lib/assets/fonts ou vendor/assets/fonts.

   Si vous êtes sur des Rails 4+, vous pouvez placer vos polices dans le dossier app/assets/fonts. Si vous souhaitez les placer à l'extérieur de l' app/assets, vous aurez besoin de faire une configuration supplémentaire, soit sur application.rb, production.rb ou qu'avez-vous:

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

2. Déclarer votre police dans votre css, comme ceci:

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

   Assurez-vous que la police est nommé exactement comme dans la partie url de la déclaration. Capitale des lettres et des signes de ponctuation faire une différence. Dans ce cas, la police devrait avoir le nom de l' icomoon.

3. Si vous utilisez Sass ou Moins avec des Rails 3.1.0+ (si votre fichier css a l' .scss ou .less extension), puis changer l' url(...) dans la déclaration de police d' font-url(...).

   Si vous n'êtes pas, alors votre fichier css doit avoir l'extension .css.erb et la déclaration de police devrait être changé en url('<%= asset_path(...) %>').

   En outre, si vous êtes à l'aide de Rails 3.2.1+, vous pouvez utiliser font_path(...) au lieu de asset_path(...). Cette aide fait exactement la même chose, mais c'est juste un peu plus clair.

4. Enfin, utilisez votre police dans votre css comme vous l'a déclaré dans l' font-family partie. Depuis, il a été déclaré en majuscule, vous pouvez l'utiliser comme ceci:

   font-family: 'Icomoon';
   

Answer 2

Maintenant, voici une astuce:

Vous devez placer toutes les polices en app/assets/fonts/ qu'ils VONT obtenir précompilé dans la mise en scène et de la production, par défaut, ils obtiendront précompilés lorsque poussé à heroku.

Les fichiers de police placés en vendor/assets va PAS être précompilés sur la mise en scène ou de production, par défaut, ils échouent sur heroku. Source!

- @plapier, thoughtbot/bourbon

Je crois fermement que la mise au fournisseur de polices en vendor/assets/fonts fait beaucoup plus de sens que de les mettre en app/assets/fonts. Avec ces 2 lignes de configuration supplémentaire ce qui a bien fonctionné pour moi (sur Rails 4):

app.config.assets.paths << Rails.root.join('vendor', 'assets', 'fonts')  
app.config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/

- @jhilden, thoughtbot/bourbon

J'ai aussi testé sur rails 4.0.0. En fait, la dernière ligne est assez sécuritaire de précompiler des polices à partir d' vendor le dossier. A pris une couple d'heures pour le comprendre. Espérons qu'il a aidé quelqu'un.

Answer 3

Si vous ne voulez pas garder une trace de déplacer vos polices :

Answer 4

Vous devez utiliser dans votre bloc de @font-face, pas

ainsi que cette ligne dans application.rb, comme vous avez mentionné (pour les polices dans``

Answer 5

J'ai eu un problème similaire quand j'ai mis à jour mon Rails 3 app Rails 4 récemment. Mes polices de caractères ne fonctionnaient pas correctement comme dans les Rails 4+, nous sommes seulement autorisés à conserver les polices en vertu de l' app/assets/fonts répertoire. Mais mon Rails 3 app avait une police différente de l'organisation. J'ai donc eu à configurer l'application pour qu'elle fonctionne encore avec des Rails 4+ mes polices dans un autre lieu autre que app/assets/fonts. J'ai essayé plusieurs solutions, mais après j'ai trouvé la non-stupides-digest-actifs gem, il a juste fait-il si facile.

Ajouter cette gemme en ajoutant la ligne suivante à votre Gemfile:

gem 'non-stupid-digest-assets'

Ensuite, exécutez:

bundle install

Et enfin, ajoutez la ligne suivante dans votre fichier de configuration config/initializers/non_digest_assets.rb fichier:

NonStupidDigestAssets.whitelist = [ /\.(?:svg|eot|woff|ttf)$/ ]

C'est tout. Cela a résolu mon problème joliment. Espérons que cela aide quelqu'un qui a rencontré le même problème que moi.