Verwenden von Schriftarten mit der Rails-Asset-Pipeline

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 eigentliche Schriftartdatei wird in / app / assets / fonts / gespeichert.

Ich habe config.assets.paths << Rails.root.join("app", "assets", "fonts")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 starte, werden die Schriftdateien nicht gefunden. Die Protokolle:

GET "/assets/icoMoon.ttf" für 127.0.0.1 wurde am 05.06.2012 um 23:21:17 Uhr gestartet. +0100 Serviertes Asset /icoMoon.ttf - 404 Nicht gefunden (13 ms)

Warum reduziert die Asset-Pipeline die Schriftdateien nicht auf nur / Assets?

Irgendwelche Ideen Leute?

Herzliche Grüße, Neil

Zusatzinformation:

Wenn ich die Rails-Konsole auf Assets-Pfade und Asset-Vorkompilierung überprüfe, 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

1. Wenn sich Ihre Rails-Version zwischen > 3.1.0und befindet < 4, platzieren Sie Ihre Schriftarten in einem der folgenden Ordner:

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

   
   

   Für Rails - Versionen > 4, Sie müssen Ihre Schriften im platzieren app/assets/fontsOrdner.

   Hinweis: Verwenden Sie die folgende Konfiguration, um Schriftarten außerhalb dieser festgelegten Ordner zu platzieren:

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

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

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

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;
   }

   Stellen Sie sicher, dass Ihre Schriftart genau den gleichen Namen hat wie im URL-Teil der Deklaration. Großbuchstaben und Satzzeichen sind wichtig. In diesem Fall sollte die Schriftart den Namen haben icomoon.

3. Wenn Sie Sass oder Less mit Rails verwenden > 3.1.0(Ihre CSS-Datei hat .scssoder .lessErweiterung), ändern Sie die url(...)in der Schriftartdeklaration in font-url(...).

   Andernfalls sollte Ihre CSS-Datei die Erweiterung .css.erbund die Schriftartdeklaration habenurl('<%= asset_path(...) %>') .

   Wenn Sie Rails verwenden > 3.2.1, können Sie font_path(...)anstelle von verwenden asset_path(...). Dieser Helfer macht genau das Gleiche, aber es ist klarer.

4. Verwenden Sie schließlich Ihre Schriftart in Ihrem CSS, wie Sie sie im font-familyTeil deklariert haben . Wenn es als groß geschrieben deklariert wurde, können Sie es folgendermaßen verwenden:

   font-family: 'Icomoon';

Hier ist eine Wendung:

Sie sollten alle Schriftarten in platzieren , app/assets/fonts/wie sie WILL in Inszenierung und Produktion von get vorkompilierte default-sie werden vorkompilierte erhalten , wenn sie gedrückt Heroku .

Font - Dateien in platziert vendor/assetswerden NICHT werden vorkompilierte auf Staging oder die Produktion von Standard - sie scheitern Heroku . Quelle!

- @plapier, Gedankenbot / Bourbon

Ich bin der festen Überzeugung, dass das Einfügen von Hersteller-Schriftarten vendor/assets/fonts viel sinnvoller ist als das Einfügen app/assets/fonts. Mit diesen 2 zusätzlichen Konfigurationszeilen hat dies für mich (auf Schienen 4) gut funktioniert:

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

- @jhilden, Gedankenbot / Bourbon

Ich habe es auch getestet rails 4.0.0. Tatsächlich reicht die letzte Zeile aus, um Schriftarten sicher aus dem vendorOrdner vorkompilieren zu können . Es dauerte ein paar Stunden, um es herauszufinden. Hoffe es hat jemandem geholfen.

Wenn Sie nicht verfolgen möchten, wie Sie Ihre Schriftarten verschieben:

# Adding Webfonts to the Asset Pipeline
config.assets.precompile << Proc.new { |path|
  if path =~ /\.(eot|svg|ttf|woff)\z/
    true
  end
}

Sie müssen font-urlin Ihrem @ font-face-Block verwenden, nichturl

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

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

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

Hier mein Ansatz zur Verwendung von Schriftarten in der Asset-Pipeline:

1) Legen Sie Ihre gesamte Schriftartdatei unter app/assets/fonts/, tatsächlich sind Sie nicht darauf beschränkt, sie unter dem fontsOrdnernamen abzulegen. Sie können einen beliebigen Unterordnernamen eingeben. ZB app/assets/abcoder app/assets/anotherfonts. Aber ich empfehle Ihnen dringend, es app/assets/fonts/für eine bessere Ordnerstruktur unter zu setzen .

2) Verwenden Sie aus Ihrer sass-Datei den sass-Helfer font-path, um Ihre Schriftarten 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ühren Sie es bundle exec rake assets:precompilevon Ihrem lokalen Computer aus aus und sehen Sie das Ergebnis Ihrer application.css. Sie sollten so etwas 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 Sie mehr über die Funktionsweise der Asset-Pipeline erfahren möchten, können Sie die folgende einfache Anleitung besuchen: https://designcode.commandrun.com/rails-asset-pipeline-simple-guide-830e2e666f6c#.6lejlayk2

Ich hatte dieses Problem auf Rails 4.2 (mit Ruby 2.2.3) und musste die font-awesome _paths.scss teilweise bearbeiten, um Verweise auf $fa-font-pathund einen führenden Schrägstrich zu entfernen . Folgendes wurde gebrochen:

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

Und die folgenden Arbeiten:

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

Eine Alternative wäre, einfach den Schrägstrich nach der Interpolation zu entfernen $fa-font-pathund dann zu definieren$fa-font-path als leere Zeichenfolge oder Unterverzeichnis mit Schrägstrich (nach Bedarf) zu definieren.

Denken Sie daran, die Assets neu zu kompilieren und den Server nach Bedarf neu zu starten. Zum Beispiel bei einem Passagier-Setup:

prompt> rake assets:clean; rake assets:clobber
prompt> RAILS_ENV=production RAILS_GROUPS=assets rake assets:precompile
prompt> service passenger restart

Laden Sie dann Ihren Browser neu.

Ich verwende Rails 4.2 und konnte die fußbaren Symbole nicht anzeigen. Anstelle des (+) in reduzierten Reihen und der kleinen Sortierpfeile, die ich erwartet hatte, wurden kleine Kästchen angezeigt. Nachdem ich die Informationen hier studiert hatte, nahm ich eine einfache Änderung an meinem Code vor: Entfernen Sie das Schriftverzeichnis in CSS. Ändern Sie also alle CSS-Einträge wie folgt:

src:url('fonts/footable.eot');

so aussehen:

src:url('footable.eot');

Es funktionierte. Ich denke, Rails 4.2 übernimmt bereits das Schriftartenverzeichnis. Wenn Sie es also erneut im CSS-Code angeben, werden die Schriftdateien nicht gefunden. Hoffe das hilft.

Ich hatte ein ähnliches Problem, als ich kürzlich meine Rails 3-App auf Rails 4 aktualisiert habe. Meine Schriftarten funktionierten nicht richtig wie in Rails 4+, wir dürfen die Schriftarten nur im app/assets/fontsVerzeichnis behalten . Aber meine Rails 3-App hatte eine andere Schriftorganisation. Daher musste ich die App so konfigurieren, dass sie weiterhin mit Rails 4+ funktioniert und meine Schriftarten an einem anderen Ort als app/assets/fonts. Ich habe verschiedene Lösungen ausprobiert, aber nachdem ich ein nicht dummes Digest-Assets- Juwel gefunden hatte, war es einfach so einfach.

Fügen Sie diesen Edelstein hinzu, indem Sie Ihrer Gemfile die folgende Zeile hinzufügen:

gem 'non-stupid-digest-assets'

Dann renne:

bundle install

Fügen Sie abschließend die folgende Zeile in Ihre Datei config / initializers / non_digest_assets.rb ein :

NonStupidDigestAssets.whitelist = [ /\.(?:svg|eot|woff|ttf)$/ ]

Das ist es. Dies hat mein Problem gut gelöst. Hoffe das hilft jemandem, der auf ein ähnliches Problem wie ich gestoßen ist.

Hier ist ein Repo, das demonstriert, wie eine benutzerdefinierte Schriftart mit Rails 5.2 bereitgestellt wird, die auf Heroku funktioniert. Es geht weiter und optimiert das Bereitstellen der Schriftarten so schnell wie möglich, so https://www.webpagetest.org/

https://github.com/nzoschke/edgecors

Zu Beginn habe ich Stücke aus den obigen Antworten ausgewählt. Für Rails 5.2+ sollten Sie keine zusätzliche Asset-Pipeline-Konfiguration benötigen.

Asset Pipeline und SCSS

• Platzieren Sie Schriftarten in app/assets/fonts
• Platzieren Sie die @font-faceDeklaration in einer scss-Datei und verwenden Sie den font-urlHelfer

Von app/assets/stylesheets/welcome.scss:

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

body {
  font-family: "Inconsolata";
  font-weight: bold;
}

Mit CORS von CDN servieren

Ich verwende CloudFront, das mit dem Heroku Edge-Addon hinzugefügt wurde .

Konfigurieren Sie zuerst ein CDN-Präfix und Standardheader Cache-Controlin production.rb:

Rails.application.configure do
  # e.g. https://d1unsc88mkka3m.cloudfront.net
  config.action_controller.asset_host = ENV["EDGE_URL"]

  config.public_file_server.headers = {
    'Cache-Control' => 'public, max-age=31536000'
  }
end

Wenn Sie versuchen, von der herokuapp.com-URL auf die CDN-URL auf die Schriftart zuzugreifen, wird in Ihrem Browser ein CORS-Fehler angezeigt:

Der Zugriff auf die Schriftart unter ' https://d1unsc88mkka3m.cloudfront.net/assets/Inconsolata-Regular.ttf ' vom Ursprung ' https://edgecors.herokuapp.com ' wurde durch die CORS-Richtlinie blockiert: Nein 'Zugriffskontrolle zulassen -Origin 'Header ist auf der angeforderten Ressource vorhanden. edgecors.herokuapp.com/ GET https://d1unsc88mkka3m.cloudfront.net/assets/Inconsolata-Regular.ttf net :: ERR_FAILED

Konfigurieren Sie CORS so, dass von Heroku aus auf die CDN-URL auf die Schriftart zugegriffen werden kann:

module EdgeCors
  class Application < Rails::Application
    # Initialize configuration defaults for originally generated Rails version.
    config.load_defaults 5.2

    config.middleware.insert_after ActionDispatch::Static, Rack::Deflater

    config.middleware.insert_before 0, Rack::Cors do
      allow do
        origins %w[
          http://edgecors.herokuapp.com
          https://edgecors.herokuapp.com
        ]
        resource "*", headers: :any, methods: [:get, :post, :options]
      end
    end
  end
end

Servieren Sie gzip Font Asset

Die Asset-Pipeline erstellt eine .ttf.gzDatei, stellt sie jedoch nicht bereit. Dieser Affen-Patch ändert die gzip-Whitelist der Asset-Pipeline in eine Blacklist:

require 'action_dispatch/middleware/static'

ActionDispatch::FileHandler.class_eval do
  private

    def gzip_file_path(path)
      return false if ['image/png', 'image/jpeg', 'image/gif'].include? content_type(path)
      gzip_path = "#{path}.gz"
      if File.exist?(File.join(@root, ::Rack::Utils.unescape_path(gzip_path)))
        gzip_path
      else
        false
      end
    end
end

Das ultimative Ergebnis ist eine benutzerdefinierte Schriftartdatei, app/assets/fontsdie aus einem langlebigen CloudFront-Cache bereitgestellt wird.

In meinem Fall wurde die ursprüngliche Frage asset-urlohne Ergebnisse anstelle der einfachen urlCSS-Eigenschaft verwendet. Die Verwendung von asset-urlendete für mich in Heroku. Außerdem legen Sie die Schriftarten im /assets/fontsOrdner fest und rufen auf, asset-url('font.eot')ohne einen Unterordner oder eine andere Konfiguration hinzuzufügen.

Wenn Sie eine Datei mit dem Namen scaffolds.css.scss haben, besteht die Möglichkeit, dass alle benutzerdefinierten Aktionen in den anderen Dateien überschrieben werden. Ich habe diese Datei auskommentiert und plötzlich hat alles funktioniert. Wenn diese Datei nichts Wichtiges enthält, können Sie sie auch einfach löschen!

Platzieren Sie Ihre Schriftarten einfach im Ordner app / assets / fonts und legen Sie den Pfad für das automatische Laden fest, wenn die App den Code in application.rb schreibt

config.assets.paths << Rails.root.join ("App", "Assets", "Schriftarten") und

Verwenden Sie dann den folgenden Code in CSS.

@Schriftart {

 font-family: 'icomoon';
 src: asset-url('icomoon.eot');
 src: asset-url('icomoon.eot') format('embedded-opentype'),
      asset-url('icomoon.woff') format('woff'),
      asset-url('icomoon.ttf') format('truetype'),
      asset-url('icomoon.svg') format('svg');
 font-weight: normal;
 font-style: normal;

}}

Versuche es.

Vielen Dank