web-dev-qa-db-fra.com

Manière officielle d'ajouter des polices personnalisées à Rails 4?

Je recherche comment ajouter des polices personnalisées à mon Rails, par exemple en ajoutant un dossier fonts dans le dossier des ressources - et je ne trouve pas de "officiel" Rails façon sur la façon de le faire.

Oui, il y a beaucoup de questions/réponses ici sur SO à ce sujet, tous avec apparemment leurs propres hacks. Mais une telle pratique courante ne devrait-elle pas passer par la fameuse "convention sur la configuration" de Rails ?

Ou si je l'ai manqué - où est la référence de la documentation sur la façon d'organiser les polices dans une application Rails?

ruby-on-railsfontsruby-on-rails-4assetsdirectory-structure
29
Numbers

Oui, le lien donné l'expliquera bien, mais si vous avez besoin d'une autre explication détaillée, alors le voici

  • Tout d'abord pour utiliser des polices personnalisées dans votre application, vous devez télécharger des fichiers de polices, vous pouvez essayer https://www.1001freefonts.com/ et rechercher des polices

    Peu de formats de fichiers de polices les plus populaires sont principalement .otf (Open Type Format) .ttf (True Type Format) .woff (Web Open Font Format)

  • Vous pouvez déplacer les polices téléchargées vers votre dossier d'application sous app/assets/fonts /

  • Après avoir téléchargé le fichier, vous devez "déclarer" les polices que vous utiliserez dans votre CSS comme ceci

    @font-face {
  font-family: "Kaushan Script Regular";
  src: url(/assets/KaushanScript-Regular.otf) format("truetype");
}

  • Enfin, vous pouvez utiliser la famille de polices que vous venez de déclarer où vous le souhaitez comme ceci

    #e-registration {
  font-family: "Kaushan Script Regular";
}

J'espère que cela t'aides.

62
Nikhil Nanjappa

Je viens de le faire...

  1. Téléchargez et enregistrez les fichiers de polices (eot, woff, woff2 ...) dans votre répertoire assets/fonts/

    1. Dans votre config/application.rb ajoutez cette ligne config.assets.paths << Rails.root.join ("app", "assets", " polices ")

Ce qu'il fait, c'est qu'il précompile votre dossier de polices comme il le fait par défaut avec vos images, feuilles de style, etc.

  1. et assurez-vous que cette ligne est définie sur true config.assets.enabled = true

  2. Dans votre sass/scss ou même en ligne avec <script> tag

    @font-face {   font-family: 'Bariol Regular';   src:
font-url('Bariol_Regular_Webfont/bariol_regular-webfont.eot');  
src:
font-url('Bariol_Regular_Webfont/bariol_regular-webfont.eot?iefix')
format('eot'),  
font-url('Bariol_Regular_Webfont/bariol_regular-webfont.woff')
format('woff'),  
font-url('Bariol_Regular_Webfont/bariol_regular-webfont.ttf')
format('truetype'),  
font-url('Bariol_Regular_Webfont/bariol_regular-webfont.svg#webfont3AwWkQXK')
format('svg');   font-weight: normal;   font-style: normal; }

Notez que vous devez utiliser le font-url helper au lieu de css 'url pour traiter les empreintes digitales effectuées par Rails lorsqu'il précompile les ressources

Enfin, définissez la famille de polices dans vos fichiers CSS

body {
   font-family: 'Bariol Regular', serif;
}

CONSEIL GRATUIT: Cela étant dit, la meilleure façon en termes de performances est de configurer cela avec JS afin que ces polices soient chargées de manière asynchrone. Vérifiez ce chargeur: https://github.com/typekit/webfontloader

16
luigi7up

J'ai eu quelques problèmes avec les approches répertoriées ci-dessus, car le CSS de production ne pointait pas vers la police ttf compilée, j'ai donc réussi à utiliser cette approche alternative empruntée à https://Gist.github.com/anotheruiguy/737957 :

  1. Place tous les fichiers de polices dans assets/stylesheets/fonts. par exemple. assets/stylesheets/fonts/digital_7.ttf.

  2. J'ai défini dans un fichier .scss que nous utilisons:

    @font-face {
    font-family: 'Digital-7';
    src: asset-url('fonts/digital_7.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

  3. J'ai utilisé la police personnalisée dans d'autres fichiers .scss:

    .digital-font {
    font-family: 'Digital-7', sans-serif;
    font-size: 40px;
}

Cela dit, une façon beaucoup plus propre de procéder consiste à placer la définition de police (digital_7_mono.ttf dans cet exemple) sur un site distinct.

Si vous utilisez Cloudfront, par exemple, dans un répertoire Cloudfront appelé my_path, téléchargez vos fichiers de polices, puis définissez un fichier css (par exemple digital_fonts.css)

@font-face {
  font-family: 'Digital-7-Mono';
  font-weight: normal;
  font-style: normal;
  src: local('Digital 7 Mono'), local('Digital-7-Mono'), url('https://mycloudfront_site.com/my_path/digital_7_mono.ttf') format('truetype');
}

Dans votre html, à l'intérieur du <head> tag, ajoutez:

2
Julie

La seule façon qui a fonctionné pour moi était la suivante:

@font-face {
  font-family: 'Vorname';
  src: asset-url('Vorname.otf') format('truetype'),
       asset-url('Vorname.ttf') format('truetype');
}
0
rld