Die Verwendung von Schriftarten mit dem Rails-Asset-Pipeline

Question

Ich habe einige Schriftarten in meiner Scss-Datei wie folgt konfiguriert:

@font-face {
  font-family: 'Icomoon';
  src: asset-url('icoMoon.eot?#iefix', font) format('embedded-opentype'),
       asset-url('icoMoon.woff', font) format('woff'),
       asset-url('icoMoon.ttf', font)  format('truetype'),
       asset-url('icoMoon.svg#Icomoon', font) format('svg');
}

Die tatsächlichen Schriftdateien sind in /app/assets/fonts/ gespeichert.

Ich habe config.assets.paths << Rails.root.join("app", "assets", "fonts") zu meiner application.rb-Datei hinzugefügt

und die kompilierte CSS-Quelle lautet wie folgt:

@font-face {
  font-family: 'Icomoon';
  src: url(/assets/icoMoon.eot?#iefix) format("embedded-opentype"), url(/assets/icoMoon.woff) format("woff"), url(/assets/icoMoon.ttf) format("truetype"), url(/assets/icoMoon.svg#Icomoon) format("svg");
}

Aber wenn ich die App ausführe, werden die Schriftdateien nicht gefunden. Die Logs:

Started GET "/assets/icoMoon.ttf" for 127.0.0.1 at 2012-06-05 23:21:17 +0100 Served asset /icoMoon.ttf - 404 Not Found (13ms)

Warum werden die Schriftartdateien nicht durch die Asset-Pipeline in nur /assets umgewandelt?

Irgendwelche Ideen Leute?

Mit freundlichen Grüßen, Neil

Zusätzliche Informationen:

Beim Überprüfen der Rails-Konsole für Assets-Pfade und assetprecompile erhalte ich folgendes:

1.9.2p320 :001 > y Rails.application.config.assets.precompile
---
- !ruby/object:Proc {}
- !ruby/regexp /(?:\/|\\|\A)application\.(css|js)$/
- .svg
- .eot
- .woff
- .ttf
=> nil

1.9.2p320 :002 > y Rails.application.config.assets.paths
---
- /Users/neiltonge/code/neiltonge/app/assets/fonts
- /Users/neiltonge/code/neiltonge/app/assets/images
- /Users/neiltonge/code/neiltonge/app/assets/javascripts
- /Users/neiltonge/code/neiltonge/app/assets/stylesheets
- /Users/neiltonge/code/neiltonge/vendor/assets/images
- /Users/neiltonge/code/neiltonge/vendor/assets/javascripts
- /Users/neiltonge/code/neiltonge/vendor/assets/stylesheets
- /Users/neiltonge/.rvm/gems/ruby-1.9.2-p320@neiltonge/gems/jquery-rails-2.0.0/vendor/assets/javascripts
- /Users/neiltonge/.rvm/gems/ruby-1.9.2-p320@neiltonge/gems/coffee-rails-3.2.1/lib/assets/javascripts
- /Users/neiltonge/.rvm/gems/ruby-1.9.2-p320@neiltonge/gems/bourbon-1.3.0/app/assets/stylesheets
- !ruby/object:Pathname
  path: /Users/neiltonge/code/neiltonge/app/assets/fonts
 => nil

Answer 1

1. Wenn Ihre Rails-Version zwischen > 3.1.0 und < 4 liegt, platzieren Sie Ihre Schriftarten in einem dieser Ordner:

   • app/assets/fonts
   • lib/assets/fonts
   • vendor/assets/fonts

   Für Rails-Versionen > 4 müssen Sie Ihre Schriftarten im Ordner app/assets/fonts platzieren.

   Hinweis: Um Schriftarten außerhalb dieser bestimmten Ordner zu platzieren, verwenden Sie die folgende Konfiguration:

   config.assets.precompile << /\.(?:svg|eot|woff|ttf)\z/

   Für Rails-Versionen > 4.2 wird empfohlen, diese Konfiguration zur config/initializers/assets.rb hinzuzufügen.

   Sie können es jedoch auch entweder zu config/application.rb oder zu config/production.rb hinzufügen.

2. Deklarieren Sie Ihre Schriftart in Ihrer CSS-Datei:

   @font-face {
     font-family: 'Icomoon';
     src:url('icomoon.eot');
     src:url('icomoon.eot?#iefix') format('embedded-opentype'),
       url('icomoon.svg#icomoon') format('svg'),
       url('icomoon.woff') format('woff'),
       url('icomoon.ttf') format('truetype');
     font-weight: normal;
     font-style: normal;
   }

   Vergewissern Sie sich, dass Ihre Schrift genau so benannt ist wie im URL-Teil der Deklaration. Großbuchstaben und Satzzeichen sind wichtig. In diesem Fall sollte die Schrift den Namen icomoon haben.

3. Wenn Sie Sass oder Less mit Rails > 3.1.0 verwenden (Ihre CSS-Datei hat die Erweiterung .scss oder .less), ändern Sie das url(...) in der Schriftdeklaration zu font-url(...).

   Andernfalls sollte Ihre CSS-Datei die Erweiterung .css.erb haben, und die Schriftdeklaration sollte url('<%= asset_path(...) %>') sein.

   Wenn Sie Rails > 3.2.1 verwenden, können Sie anstelle von asset_path(...) font_path(...) verwenden. Dieser Helfer tut genau dasselbe, ist aber klarer.

4. Verwenden Sie abschließend Ihre Schriftart in Ihrer CSS wie Sie sie im font-family Teil deklariert haben. Wenn sie großgeschrieben deklariert wurde, können Sie sie wie folgt verwenden:

   font-family: 'Icomoon';

Answer 2

Jetzt kommt ein Twist:

Du solltest alle Schriftarten in app/assets/fonts/ platzieren, da sie standardmäßig beim Staging und Produktion vorkompiliert werden - sie werden vorkompiliert, wenn sie auf heroku hochgeladen werden.

Schriftdateien, die in vendor/assets platziert sind, werden standardmäßig NICHT beim Staging oder Produktion vorkompiliert - sie schlagen auf heroku fehl. Quelle!

— @plapier, thoughtbot/bourbon

Ich glaube fest daran, dass es mehr Sinn macht, Vendor-Schriftarten in vendor/assets/fonts zu platzieren als in app/assets/fonts. Mit diesen 2 zusätzlichen Konfigurationszeilen hat das für mich gut funktioniert (auf Rails 4):

app.config.assets.paths << Rails.root.join('vendor', 'assets', 'fonts')  
app.config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/

— @jhilden, thoughtbot/bourbon

Ich habe es auch auf rails 4.0.0 getestet. Tatsächlich reicht die letzte Zeile aus, um die Schriftarten aus dem vendor-Ordner sicher vorkompilieren zu können. Es hat ein paar Stunden gedauert, um es herauszufinden. Hoffentlich hat es jemandem geholfen.

Answer 3

Sie müssen font-url in Ihrem @font-face-Block verwenden, nicht url

@font-face {
font-family: 'Inconsolata';
src:font-url('Inconsolata-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

sowie diese Zeile in der application.rb, wie Sie erwähnt haben (für Schriftarten in app/assets/fonts

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

Answer 4

Wenn Sie keine Lust haben, Ihre Schriftarten herumzuschieben:

# Hinzufügen von Webfonts zum Asset-Pipeline
config.assets.precompile << Proc.new { |path|
  if path =~ /\.(eot|svg|ttf|woff)\z/
    true
  end
}

Answer 5

Hier mein Ansatz zur Verwendung von Schriften im Asset-Pipeline:

1) Platziere alle deine Schriftdateien unter app/assets/fonts/. Tatsächlich bist du nicht darauf beschränkt, sie unter dem Ordner fonts abzulegen. Du kannst jeden Unterordnernamen verwenden, den du möchtest. z.B. app/assets/abc oder app/assets/anotherfonts. Ich empfehle jedoch dringend, sie unter app/assets/fonts/ abzulegen, für eine bessere Ordnerstruktur.

2) Verwende aus deiner Sass-Datei heraus den Sass-Helfer font-path, um deine Schrift-Assets wie folgt anzufordern

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

3) Führe bundle exec rake assets:precompile auf deiner lokalen Maschine aus und sieh dir das Ergebnis deiner application.css an. Du solltest etwas Ähnliches sehen:

@font-face {
    font-family: 'FontAwesome';
    src: url("/assets/fontawesome-webfont-d4f5a99224154f2a808e42a441ddc9248ffe78b7a4083684ce159270b30b912a.eot" "?v=4.4.0");
    src: url("/assets/fontawesome-webfont-d4f5a99224154f2a808e42a441ddc9248ffe78b7a4083684ce159270b30b912a.eot" "?#iefix&v=4.4.0") format("embedded-opentype"), url("/assets/fontawesome-webfont-3c4a1bb7ce3234407184f0d80cc4dec075e4ad616b44dcc5778e1cfb1bc24019.woff2" "?v=4.4.0") format("woff2"), url("/assets/fontawesome-webfont-a7c7e4930090e038a280fd61d88f0dc03dad4aeaedbd8c9be3dd9aa4c3b6f8d1.woff" "?v=4.4.0") format("woff"), url("/assets/fontawesome-webfont-1b7f3de49d68b01f415574ebb82e6110a1d09cda2071ad8451bdb5124131a292.ttf" "?v=4.4.0") format("truetype"), url("/assets/fontawesome-webfont-7414288c272f6cc10304aa18e89bf24fb30f40afd644623f425c2c3d71fbe06a.svg" "?v=4.4.0#fontawesomeregular") format("svg");
    font-weight: normal;
    font-style: normal;
}

Wenn du mehr darüber erfahren möchtest, wie der Asset-Pipeline funktioniert, kannst du den folgenden einfachen Leitfaden besuchen: https://designcode.commandrun.com/rails-asset-pipeline-simple-guide-830e2e666f6c#.6lejlayk2