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

Hier ist ein Repository, das zeigt, wie man eine benutzerdefinierte Schriftart mit Rails 5.2 bedient, die auf Heroku funktioniert. Es geht noch weiter und optimiert das Servieren der Schriftarten, um so schnell wie möglich zu sein gemäß https://www.webpagetest.org/

https://github.com/nzoschke/edgecors

Um anzufangen, habe ich Teile 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

• Platziere Schriftarten in app/assets/fonts
• Platziere die @font-face-Deklaration in einer scss-Datei und verwende den font-url-Helper

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

Vom CDN mit CORS bedienen

Ich benutze CloudFront, hinzugefügt mit dem Heroku Edge-Addon.

Konfiguriere zuerst ein CDN-Präfix und Standard-Cache-Control-Headers in production.rb:

Rails.application.configure do
  # z.B. 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, auf die Schriftart von der herokuapp.com-URL zur CDN-URL zuzugreifen, erhalten Sie einen CORS-Fehler in Ihrem Browser:

Zugriff auf Schriftart unter 'https://d1unsc88mkka3m.cloudfront.net/assets/Inconsolata-Regular.ttf' von Ursprung 'https://edgecors.herokuapp.com' wurde durch die CORS-Richtlinie blockiert: Kein 'Access-Control-Allow-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 also CORS, um den Zugriff auf die Schriftart von Heroku zur CDN-URL zu erlauben:

module EdgeCors
  class Application < Rails::Application
    # Initialisiere Konfigurationsstandards für die ursprünglich generierte 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

Geben Sie das gzip-Schriftarten-Asset aus

Die Asset Pipeline erstellt eine .ttf.gz-Datei, gibt sie jedoch nicht aus. Dieses Monkey-Patch ändert die Asset Pipeline-Gzip-Whitelist 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

Das endgültige Ergebnis ist eine benutzerdefinierte Schriftartdatei in app/assets/fonts, die aus einem langlebigen CloudFront-Cache serviert wird.

Answer 2

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

@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 das folgende funktioniert:

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

Alternativ könnte man einfach den Schrägstrich nach dem interpolierten $fa-font-path entfernen und dann $fa-font-path als leeren String oder Unterverzeichnis mit abschließendem Schrägstrich definieren (wie benötigt).

Vergessen Sie nicht, die Assets neu zu compilieren und Ihren Server bei Bedarf neu zu starten. Zum Beispiel, bei einem Passenger-Setup:

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

Aktualisieren Sie dann Ihren Browser.

Answer 3

Ich verwende Rails 4.2 und konnte die Footable-Symbole nicht anzeigen lassen. Anstelle des (+) in den ausgeblendeten Zeilen und der kleinen Sortierpfeile, die ich erwartet hatte, wurden kleine Kästchen angezeigt. Nachdem ich die Informationen hier studiert hatte, habe ich eine einfache Änderung an meinem Code vorgenommen: entfernen des Schriftverzeichnisses in CSS. Das heißt, ändern Sie alle CSS-Einträge wie diesen:

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

damit sie so aussehen:

src:url('footable.eot');

Es hat funktioniert. Ich glaube, Rails 4.2 geht bereits davon aus, dass das Schriftverzeichnis vorhanden ist, daher wird es nicht noch einmal im CSS-Code angegeben und die Schriftdateien werden nicht gefunden. Ich hoffe, das hilft.

Answer 4

Ich hatte ein ähnliches Problem, als ich kürzlich meine Rails 3-App auf Rails 4 aktualisiert habe. Meine Schriften funktionierten nicht richtig, da wir in Rails 4+ nur noch die Schriften im Verzeichnis app/assets/fonts behalten dürfen. Aber meine Rails 3-App hatte eine andere Schriftorganisation. Also musste ich die App so konfigurieren, dass sie weiterhin mit Rails 4+ funktioniert, indem ich meine Schriften an einem anderen Ort als app/assets/fonts habe. Ich habe mehrere Lösungen ausprobiert, aber nachdem ich das non-stupid-digest-assets Gem gefunden habe, war es einfach.

Füge dieses Gem hinzu, indem du die folgende Zeile zu deiner Gemfile hinzufügst:

gem 'non-stupid-digest-assets'

Führe dann aus:

bundle install

Und füge schließlich die folgende Zeile zu deiner config/initializers/non_digest_assets.rb Datei hinzu:

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

Das war's. Das hat mein Problem schön gelöst. Hoffentlich hilft das jemandem, der ein ähnliches Problem wie ich hatte.

Answer 5

In meinem Fall war die ursprüngliche Frage, die asset-url ohne Ergebnisse anstelle der einfachen url CSS-Eigenschaft verwendete. Die Verwendung von asset-url hat bei mir auf Heroku funktioniert. Außerdem das Setzen der Schriftarten im /assets/fonts Ordner und das Aufrufen von asset-url('font.eot') ohne Hinzufügen eines Unterordners oder einer anderen Konfiguration dazu.