Offizielle Möglichkeit zum Hinzufügen von benutzerdefinierten Schriftarten zu Rails 4?

Question

Ich untersuche, wie benutzerdefinierte Schriftarten zu meiner Rails App, z. indem Sie einen Ordner fonts im Ordner Assets hinzufügen - und ich kann keinen "offiziellen" Weg finden, wie dies zu tun ist.

Ja, es gibt viele Fragen/Antworten hier auf SO über die Angelegenheit, alle scheinbar mit ihren eigenen Hacks. Aber sollte eine solche gängige Praxis nicht unter die berühmte "Konvention über Konfiguration" von Rails fallen?

Oder wenn ich es verpasst habe - wo ist die Dokumentationsreferenz zur Organisation von Zeichensätzen in einer Rails App?

Answer 1

Ja die Verbindung gegeben wird es gut erklären, aber wenn sich hier eine weitere detaillierte Erklärung brauchen, dann ist es

• Zum einen benutzerdefinierten Schriftarten in Ihrer Anwendung Sie Schriftart-Dateien zum Download verwenden müssen, können Sie versuchen, http://www.1001freefonts.com/

  http://www.piccsy.com/everything-design/ und suchen nach Schriften

  Ein paar der beliebtesten Font-Datei-Formate sind in erster Linie OTF (Open Type-Format) ttf (True Type Fo RMAT) .woff (Web Open Font Format)

• Sie können die heruntergeladenen Schriften in Ihrer App-Ordner unter app/assets/fonts/

• Nach dem Herunterladen der Datei, die Sie benötigen, um "erklären" die Schriften, die Sie in Ihrem CSS wird wie dieser

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

• Schließlich verwenden können Sie die Schriftart-Familie verwenden, die Sie gerade erklärt, wo immer Sie mögen dieses

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

wollen

Hoffe das hilft.

Answer 2

gerade tat es ...

1. Herunterladen und die Schriftart-Dateien speichern (EOT, woff, woff2 ...) in Ihrer Vermögenswerte/fonts/ Verzeichnis

   2. In Ihrem config/application.rb fügen Sie diese Zeile config.assets.paths < < Rails.root.join ("App", "Vermögenswerte", "Schriftarten")

Was dies tut, ist es Vorkompilierung Ihre Fonts-Ordner wie es standardmäßig mit Ihrem Bilder tut, Stylesheets usw.

3. und stellen Sie sicher, dass diese Zeile wird auf True config.assets festgelegt.enabled = wahr

4. In Ihrem sass/SCSS oder auch inline mit <script> Tag

   @ font-face {font-family: 'Bariol Regular'; Quelle: 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 "); Schriftgewicht: normal; Schriftschnitt: normal; }

Beachten Sie, dass die font-url Helfer anstelle von CSS verwenden sollten url die Abnahme von Fingerabdrücken von Rails getan zu adressieren, wenn sie die Vermögenswerte

Schließlich Vorkompilierung, stellen Sie die font-family in Ihre CSS-Dateien

FREE TIPP: Dies gesagt, der beste Weg in Bezug auf die Leistung ist, dies mit JS einzurichten, so dass diese Schriften asynchron geladen werden. Prüfen Sie diesen Lader: https://github.com/typekit/webfontloader

Answer 3

Ich hatte einige Probleme mit den Ansätzen oben aufgeführten, weil die Produktion css war nicht zu dem kompilierten ttf Schriftart zeigt, so dass ich dann dazu verwendet, erfolgreich mit diesem alternativen Verfahren entlehnt https://gist.github.com/anotheruiguy/7379570:

1. Platziert alle Schriftdateien in assets/stylesheets/fonts. z.B. assets/stylesheets/fonts/digital_7.ttf.

2. I definiert in einer .scss-Datei, die wir verwenden:

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

3. ich die benutzerdefinierte Schriftart in anderen .scss Dateien genutzt:

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

---

Dies sagte Um dies zu erreichen, müssen Sie die Schriftartdefinition (digital_7_mono.ttf in diesem Beispiel) auf eine separate Site stellen.

Wenn Sie mit Cloudfront, beispielsweise in einem Cloudfront Verzeichnis my_path genannt, Ihre Schriftdateien hochladen, definieren dann eine CSS-Datei (zB 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'); 
} 

in Ihrem HTML innerhalb des <head> Tag, hinzufügen: