Officiel de la façon d'ajouter des polices personnalisées pour Rails 4?

Je suis à la recherche comment ajouter des polices personnalisées pour mon application Rails, par exemple en ajoutant une fonts dossier dans le dossier des actifs, - et je ne trouve pas de "officielle" des Rails de chemin sur la façon de le faire.

Oui, il ya beaucoup de questions/réponses ici sur DONC sur la question, toutes apparemment avec leur propre hacks. Mais ne devrions pas une pratique courante passer sous les Rails " fameuse "convention over configuration"?

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

InformationsquelleAutor Numbers | 2014-01-21
  1. 61

    Oui le lien donné l'expliquera bien, toutefois, si u besoin d'une autre explication détaillée puis ici, il est

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

      Quelques-uns des plus populaires de la police formats de fichier sont principalement .feo(Ouvert de Type de Format) .ttf(True Type de Format) .woff(Web Open font Format)

    • Vous pouvez déplacer les polices téléchargées à votre dossier app dans le dossier app/assets/fonts/

    • Après avoir téléchargé le fichier que vous avez besoin de "déclarer" les polices que vous utilisez 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 police de caractères de la famille que vous venez déclaré partout où vous voulez, comme ce 

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

    Espère que cette aide.

    • Simple et bonne explication. Merci! 🙂
    • Exceptionnelle explication. Dans le cas où quelqu'un a des problèmes avec les détails. En vertu de mon application, le css src ligne a besoin d'être modifié pour src: url(KaushanScript-Regular.otf) format("truetype");
    • Est-ce tout ce qui est nécessaire? Ce que sur l'ajout de la config de chemins et de faire en sorte qu'il fonctionne sur la production?
    • Vous spécifiez le format de la police. Mais lorsque vous incluez plusieurs types, ne vous déclarer plusieurs lignes de repli? Comment faites-vous cela, il suffit de déclarer plusieurs lignes?
    • N'avez-vous pas besoin d'utiliser asset-url() afin qu'il fonctionne sur la production quand il fait précompilés et un hachage digest est ajoutée au nom de fichier?
    • Qu'est-ce que l'truetype pour?
    • Le format() est de fournir le navigateur avec un indice quant à ce format une ressource de police est, donc, il peut choisir un adapté. Les types disponibles sont: woff, woff2, truetype, opentype, embedded-opentype, et svg.

    InformationsquelleAutor Nikhil Nanjappa
  2. 15

    Fait...

    1. De télécharger et sauvegarder les fichiers de police (eot, woff, woff2...) dans votre
      actifs/fonts/ répertoire

      1. Dans votre config/application.rb ajouter cette ligne de config.les actifs.les chemins de
        << Rails.de la racine.join("app", "actifs", "polices")

    Ce que cela ne se fait-il
    précompilation votre dossier de polices juste comme il le fait par défaut avec votre
    images, feuilles de style, etc.

    1. et assurez-vous que cette ligne est définie à vrai config.les actifs.activée =
      vrai

    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 à l'adresse de l'empreinte faite par les Rails quand il précompilation des actifs

    Enfin, définir la police de caractères de la famille dans vos fichiers CSS

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

    GRATUIT ASTUCE:
    Ceci étant dit, la meilleure façon en termes de performances avec la JS pour que ces polices chargés de manière asynchrone. Cochez cette loader: https://github.com/typekit/webfontloader

    • Avec des Rails 5, j'ai pu ajouter mes polices dans /app/assets/polices et utiliser la police-url() la méthode lors de la spécification de la police de la src. Ce fut assez pour le travail, je n'ai pas besoin de changer tous les autres configurations (n'a pas à faire l'étape 2 ou 3 ci-dessus)
    InformationsquelleAutor luigi7up
  3. 2

    J'ai eu quelques difficultés avec les approches présentées ci-dessus, parce que la production de la css n'a pas été pointant vers le compilé police ttf, j'ai donc utilisé avec succès cette approche alternative emprunté https://gist.github.com/anotheruiguy/7379570:

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

    2. J'ai défini dans un .scss fichier 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 .scss fichiers:

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

    Cela dit, beaucoup plus propre façon de le faire est de mettre la définition de la police (digital_7_mono.ttf dans cet exemple) sur un site distinct.

    Si vous utilisez Cloudfront, par exemple, dans un Cloudfront répertoire appelé my_path, télécharger vos fichiers de police, puis de définir 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 code html, à l'intérieur de la <head> tag, ajouter:

    InformationsquelleAutor Julie
  4. 0

    La seule façon qui ont travaillé pour moi c'était ça:

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