Comment utiliser des polices dans les Rails 4

Question

J'ai un Rails 4 application et je suis en train d'utiliser une police personnalisée.

J'ai suivi de nombreux tutoriels sur ce, et en quelque sorte c'est juste ne fonctionne pas pour mon application.

Je suis l'aide d' application.css.less et avoir la déclaration suivante:

@font-face {
    font-family: 'HDVPeace';
    src: font-url('HDV_Peace.eot');
    src: font-url('HDV_Peace.eot?iefix') format('eot'),
        font-url('HDV_Peace.woff') format('woff'),
        font-url('HDV_Peace.ttf') format('truetype'),
        font-url('HDV_Peace.svg#webfont') format('svg');
}

Note: j'ai essayé à l'aide d' url() au lieu de font-url() également. L'ancien génère des erreurs 404 sur la console, lorsque celle-ci ne semble pas faire quoi que ce soit. Dans le chrome dev tools en vertu de ressources, les fichiers de police ne sont pas parus sous l' assets le dossier, ou n'importe où

dans mon config/application.rb j'ai:

config.assets.paths << Rails.root.join('app', 'assets', 'fonts')

Et dans les deux mon config/environments/development.rb et config/environments/production.rb j'ai:

config.assets.paths << Rails.root.join('app', 'assets', 'fonts')
config.assets.precompile += %w( .svg .eot .woff .ttf)

Mes fichiers de police sont situés à l' app/assets/fonts et ne sont pas contenus dans un dossier en dessous...

Ce qui me manque?

Mise à JOUR:

structure de dossier

app
 |----assets
        |----fonts
               |----HDV_Peace.eot
               |----HDV_Peace.svg
               |----HDV_Peace.ttf
               |----HDV_Peace.woff

Answer 1

Votre @font-face déclaration est très proche, vous êtes manquant de peu l' /assets préfixe dans l'url de la déclaration.

@font-face {
    font-family: 'HDVPeace';
    src: url('/assets/HDV_Peace.eot');
    src: url('/assets/HDV_Peace.eot?iefix') format('eot'),
         url('/assets/HDV_Peace.woff') format('woff'),
         url('/assets/HDV_Peace.ttf') format('truetype'),
         url('/assets/HDV_Peace.svg#webfont') format('svg');
}

Tout ce qui a été ajouté à l' assets.paths est disponible directement sous l' /assets chemin à la fois le développement et la production. Vous avez seulement besoin de l'actif modification du chemin de ligne au sein d' application.rb,, de le faire à nouveau en development.rb et production.rb est tout simplement redondants.

En outre, tous les formats de police sont essentiellement binaire. Il n'est pas nécessaire de pré-compilation, de sorte que vous pouvez supprimer en toute sécurité l' assets.precompile plus.

Voici une nouvelle Rails 4 service d'application des polices personnalisées. En dehors de la font-face instruction d'importation dans le css et l'ajout d'une page pour afficher rien d'autre n'a été fait pour elle:

https://github.com/sorentwo/font-example

Answer 2

Dans les Rails 4, il existe une aide pour définir le chemin d'accès pour les polices de caractères.

Si vous avez la police dans /actif/polices ou vendor/assets/les polices, les Rails 4 les trouverez! Pour prendre avantage de cela, dans le fichier CSS de Bootstrap changer le @font_face appel à

@font-face {
  font-family: 'Glyphicons Halflings';
  src: font-url('glyphicons-halflings-regular.eot');
  src: font-url('glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), 
       font-url('glyphicons-halflings-regular.woff') format('woff'), 
       font-url('glyphicons-halflings-regular.ttf') format('truetype'), 
       font-url('glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

Notez qu'il n'existe pas de dossier de spécification en avant les fichiers de police. Ceci est complété par les rails helper.

Answer 3

Veuillez ne pas coder en dur de votre répertoire de polices de caractères depuis l'emplacement est dynamique.

Tout comme il existe intégré dans les aides pour les images, il est également intégré dans les aides pour les polices: http://api.rubyonrails.org/classes/ActionView/Helpers/AssetUrlHelper.html#method-i-font_url

Exemple:

@font-face {
    font-family: 'QuicksandOTF';
    src: font_url('Quicksand-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

Answer 4

Redémarrer "serveur rails" après la création de l'app/assets/répertoire des polices

Answer 5

J'ai trouvé cet article pour résoudre tous mes problèmes.

http://aokolish.me/blog/2011/12/24/at-font-face-with-the-asset-pipeline/