web-dev-qa-db-fra.com

Comment utiliser les polices dans Rails 4

J'ai une application Rails 4 et j'essaie d'utiliser une police personnalisée.

J'ai suivi de nombreux tutoriels à ce sujet et, d'une manière ou d'une autre, cela ne fonctionne tout simplement pas pour mon application.

J'utilise application.css.less Et j'ai 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');
}

Remarque: j'ai essayé d'utiliser url() au lieu de font-url() également. Le premier génère 404 erreurs sur la console, alors que le dernier ne semble rien faire du tout. Dans les outils de développement chrome sous Ressources, les fichiers de polices n'apparaissent pas sous le dossier assets , ou n'importe où

dans mon config/application.rb j'ai:

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

Et dans mes 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 à app/assets/fonts Et ne sont pas contenus dans un dossier en dessous de ...

Qu'est-ce que je rate?

PDATE:

structure de dossier

app
 |----assets
        |----fonts
               |----HDV_Peace.eot
               |----HDV_Peace.svg
               |----HDV_Peace.ttf
               |----HDV_Peace.woff
fontsasset-pipelineruby-on-rails-4
63
SnareChops

Votre @font-face La déclaration est très proche, il ne manque que le /assets préfixe dans la déclaration d'URL.

@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é à assets.paths est disponible directement sous le /assets chemin en développement et en production. Vous n'avez besoin que de la ligne de modification du chemin d'accès au sein de application.rb, refais-le dans development.rb et production.rb est simplement redondant.

En outre, tous les formats de police sont essentiellement binaires. Il n'est pas nécessaire de les pré-compiler, vous pouvez donc supprimer le fichier assets.precompile une addition.

60
Parker Selbert

Dans Rails 4, un assistant vous permet de définir le chemin d'accès aux polices.

Si vous avez la police dans/assets/fonts ou vendor/assets/fonts, Rails 4 les trouvera! Pour en tirer parti, dans le Bootstrap Fichier CSS change l'appel @font_face en

@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'y a pas de spécification de dossier devant les fichiers de polices. Ceci est complété par l’assistant Rails).

51
Nalin

Veuillez ne pas coder en dur votre répertoire de polices, car l’emplacement est dynamique.

Tout comme il existe des aides intégrées pour les images, il existe également des aides intégrées 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;
}
20
Mike Bethany

Cela a fonctionné pour moi sur une Rails 4.1.

  1. Ajoutez les polices sous `app/assets/fonts`
  2. Appelez-les depuis un fichier `.css.scss` comme suit:
@font-face {
  font-family: 'icomoon';
  src: url(font-path('icomoon.eot') + "?#iefix") format('embedded-opentype'),
    url(font-path('icomoon.woff')) format('woff'),
    url(font-path('icomoon.ttf'))  format('truetype'),
    url(font-path('icomoon.svg') + "#icomoon") format('svg');
}
[class^="icon-"], [class*=" icon-"] {
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
11
rebagliatte

Redémarrez 'Rails server' après avoir créé le répertoire app/assets/fonts

9
PJT

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/

5
Ricky

Au cas où vous auriez du mal à utiliser les polices dans Rails 5, il vous suffit de modifier app/assets/config/manifest.js

Et puis insérez ceci //= link_tree ../fonts

Comment utiliser:

@font-face { font-family: 'FontAwesome'; src: url('fontawesome-webfont.eot?v=4.6.3'); src: url('fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'), url('fontawesome-webfont.woff2?v=4.6.3') format('woff2'), url('fontawesome-webfont.woff?v=4.6.3') format('woff'), url('fontawesome-webfont.ttf?v=4.6.3') format('truetype'), url('fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; }

Et n'oubliez pas de redémarrer votre serveur.

3
david.juntak

Parfois, les polices ne sont pas détectées à partir du assets/fonts répertoire.

Si la sécurité n’est pas un problème, nous pouvons placer le répertoire fonts dans le dossier public. Ils seront alors disponibles à un public/ niveau.

2
tjs7706

N'oubliez plus rien de changer Rails 4 dans votre application.rb. Ajoutez simplement le préfixe / assets / comme @Parker Selbert et les suivants marchera:

@font-face {
  font-family: 'custom-font-name';
  src: font-url('/assets/_folder_/fontX-webfont.eot');
  src: font-url('/assets/_folder_/fontX-webfont.eot?#iefix') format('embedded-opentype'),
       font-url('/assets/_folder_/fontX-webfont.woff') format('woff'),
       font-url('/assets/_folder_/fontX-webfont.ttf') format('truetype'),
       font-url('/assets/_folder_/fontX-webfont.svg#sociconregular') format('svg');
  font-weight: normal;
  font-style: normal;

}
1
luigi7up