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
quelle
font-url
Helfer in SCSS in Rails.Antworten:
Wenn sich Ihre Rails-Version zwischen
> 3.1.0
und 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 platzierenapp/assets/fonts
Ordner.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.2
wird empfohlen , diese Konfiguration hinzuzufügenconfig/initializers/assets.rb
.Sie können es jedoch auch entweder zu
config/application.rb
oder zu hinzufügenconfig/production.rb
Deklarieren Sie Ihre Schriftart in Ihrer CSS-Datei:
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
.Wenn Sie Sass oder Less mit Rails verwenden
> 3.1.0
(Ihre CSS-Datei hat.scss
oder.less
Erweiterung), ändern Sie dieurl(...)
in der Schriftartdeklaration infont-url(...)
.Andernfalls sollte Ihre CSS-Datei die Erweiterung
.css.erb
und die Schriftartdeklaration habenurl('<%= asset_path(...) %>')
.Wenn Sie Rails verwenden
> 3.2.1
, können Siefont_path(...)
anstelle von verwendenasset_path(...)
. Dieser Helfer macht genau das Gleiche, aber es ist klarer.Verwenden Sie schließlich Ihre Schriftart in Ihrem CSS, wie Sie sie im
font-family
Teil deklariert haben . Wenn es als groß geschrieben deklariert wurde, können Sie es folgendermaßen verwenden:quelle
config.assets.precompile += %w( .svg .eot .woff .ttf )
ist eigentlich falsch, müssen Sie hinzufügen, um etwas vorkompilieren, das mit dem vollständigen Asset-Namen übereinstimmt. Ein regulärer Ausdruck hat für mich funktioniert:config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/
config.assets.paths
ist für Ketten Referenzen, hier nicht relevant.config.assets.precompile
ist auch nutzlos, weil "Der Standard-Matcher zum Kompilieren von Dateien application.js, application.css und alle Nicht-JS / CSS-Dateien (dies schließt alle Bild-Assets automatisch ein) aus App- / Assets-Ordnern umfasst" (siehe hier )Hier ist eine Wendung:
- @plapier, Gedankenbot / Bourbon
- @jhilden, Gedankenbot / Bourbon
Ich habe es auch getestet
rails 4.0.0
. Tatsächlich reicht die letzte Zeile aus, um Schriftarten sicher aus demvendor
Ordner vorkompilieren zu können . Es dauerte ein paar Stunden, um es herauszufinden. Hoffe es hat jemandem geholfen.quelle
app.config.assets.paths << Rails.root.join('vendor', 'assets', 'fonts')
app.config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/
Ein Kommentar zu einer anderen Antwort besagt, dass letztere sich um beide kümmert.app/assets
Eingaben in Kettenräder und Freunde als Ausgaben verarbeitet werdenpublic/assets
, währendvendor/assets
es immer noch nützlich sein kann, Assets ohne Änderungen bereitzustellen. beide haben ihre Anwendungsfälle. Die gesamte Konvention des Verkaufs basiert auf der Garantie, dass nichts passiertvendor/*
. (Ja,vendor/plugins
wurde mit Code-Hoarding, Closed-Source-Mania-Pre-Gem-Ära missbraucht und die Leute haben einfach nicht versionierte Js invendor/assets/javascripts
Pre- Bower / Rails-Assetsconfig/initializers/assets.rb
Wenn Sie nicht verfolgen möchten, wie Sie Ihre Schriftarten verschieben:
quelle
config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/
Sie müssen
font-url
in Ihrem @ font-face-Block verwenden, nichturl
sowie diese Zeile in application.rb, wie Sie erwähnt haben (für Schriftarten in
app/assets/fonts
quelle
src: url(someFont.ttf)
undsrc: font-url(someFont.ttf)
funktionierte beim Einlegen von Dateienapp/assets/fonts
. Ich habe.scss
standardmäßig Erweiterungen. Ich musste nicht zu den config.assets.paths hinzufügen.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 demfonts
Ordnernamen abzulegen. Sie können einen beliebigen Unterordnernamen eingeben. ZBapp/assets/abc
oderapp/assets/anotherfonts
. Aber ich empfehle Ihnen dringend, esapp/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 anzufordern3) Führen Sie es
bundle exec rake assets:precompile
von Ihrem lokalen Computer aus aus und sehen Sie das Ergebnis Ihrer application.css. Sie sollten so etwas sehen: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
quelle
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-path
und einen führenden Schrägstrich zu entfernen . Folgendes wurde gebrochen:Und die folgenden Arbeiten:
Eine Alternative wäre, einfach den Schrägstrich nach der Interpolation zu entfernen
$fa-font-path
und 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:
Laden Sie dann Ihren Browser neu.
quelle
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:
so aussehen:
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.
quelle
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/fonts
Verzeichnis 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 alsapp/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:
Dann renne:
Fügen Sie abschließend die folgende Zeile in Ihre Datei config / initializers / non_digest_assets.rb ein :
Das ist es. Dies hat mein Problem gut gelöst. Hoffe das hilft jemandem, der auf ein ähnliches Problem wie ich gestoßen ist.
quelle
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
app/assets/fonts
@font-face
Deklaration in einer scss-Datei und verwenden Sie denfont-url
HelferVon
app/assets/stylesheets/welcome.scss
: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-Control
inproduction.rb
:Wenn Sie versuchen, von der herokuapp.com-URL auf die CDN-URL auf die Schriftart zuzugreifen, wird in Ihrem Browser ein CORS-Fehler angezeigt:
Konfigurieren Sie CORS so, dass von Heroku aus auf die CDN-URL auf die Schriftart zugegriffen werden kann:
Servieren Sie gzip Font Asset
Die Asset-Pipeline erstellt eine
.ttf.gz
Datei, stellt sie jedoch nicht bereit. Dieser Affen-Patch ändert die gzip-Whitelist der Asset-Pipeline in eine Blacklist:Das ultimative Ergebnis ist eine benutzerdefinierte Schriftartdatei,
app/assets/fonts
die aus einem langlebigen CloudFront-Cache bereitgestellt wird.quelle
In meinem Fall wurde die ursprüngliche Frage
asset-url
ohne Ergebnisse anstelle der einfachenurl
CSS-Eigenschaft verwendet. Die Verwendung vonasset-url
endete für mich in Heroku. Außerdem legen Sie die Schriftarten im/assets/fonts
Ordner fest und rufen auf,asset-url('font.eot')
ohne einen Unterordner oder eine andere Konfiguration hinzuzufügen.quelle
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!
quelle
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 {
}}
Versuche es.
Vielen Dank
quelle