2014-11-22 8 views
7

So browsery machen alles über JavaScript zur Laufzeit, sogar CSS Zeug. Aber wie kann ich mit Schriften umgehen, wie font-awesome mit Npm und browserifizieren.Wie benutze ich browserify mit Fonts

Ein Npm Pacakge existiert hier: https://www.npmjs.org/package/font-awesome Aber wie kann ich die Schriftarten für meinen Browser bündeln, ohne ein anderes Werkzeug wie Grunt oder Schluck zu verwenden.

// bearbeiten

Wenn ich jetzt eine fa Klasse in meinem html, verwenden möchten, gibt es eine andere Art und Weise auf die node_modules/font-awesome/css/font-awesome.css in meine HTML-Datei als Hinweis?

Ich suche eine automatisierte Lösung, denn wenn ich mehrere Bibliotheken wie font-awesome habe und sie ihre eigenen Assets wie Fonts, Bilder und andere Dateien mitbringen, möchte ich nicht auf jede Asset-Datei von Hand zeigen meine HTML-Datei.

Mit Jade kann ich nur einige Dateien in public dienen. Und public enthält alle Assets, die über meine Remote-Abhängigkeiten kommen, wie Schriftarten, Bilder, ... Aber wie kopieren oder symlink alle Dateien von der bestimmten node_modules automatisch auf die public?

+0

was meinst du "bündel". 'npm install font-awesome' installiert alle font-awesome Sachen im Verzeichnis node_modules und Sie können Ihre App einfach so einrichten, dass sie auf'./node_modules/fontawesome' als statisches Verzeichnis zum Abrufen von Ressourcen zeigt. Ihre Frage braucht wirklich mehr Details wie das, was Sie für das Hosting Ihrer App/Site/was auch immer verwenden. Auch warum sollte Grunt/Schluck sogar im entferntesten problematisch sein? Du verwendest eindeutig bereits node und browserify, Hinzufügen von Grunt/Gulp ist nur anständige Praxis. –

+0

danke, aktualisiert meine Frage – timaschew

+0

verwenden Sie noch etwas, oder ist es nur eine einfache .html-Datei und npm-installiert fontawesome? (z. B. verwenden Sie Express? Verwenden Sie Jekyll, etc.?) –

Antwort

2

Ich kenne einen einfachen Weg, das zu tun. Verwenden Sie Ihre Schriftarten im Base64-Format. Auf diese Weise ruhen die Font-Daten innerhalb der CSS selbst, nicht in externen Dateien.

Dann laden Sie einfach Ihr CSS in Browserify wie gewohnt (mit Modulen wie "insert-css" oder "cssy". Ich benutze "stylify", weil ich Stylus verwende) und auch die CSS-Definitionen Tragen Sie die Schriftdaten selbst mit.

Das Komprimieren Ihres Base64-Codes ist ebenfalls eine gute Idee. Oder lass Uglify das Komprimieren am Ende machen. Ergebnisse vergleichen

Überprüfen Sie Ihre Zielbrowser-Unterstützung für Base64-Schriftarten.