grunt m2webfont Download - grunt m2webfont Quellcode Download

grunt m2webfont

Schriftarten herunterladen

1.0.0

Herunterladen

Erstellen Sie WebFont aus SVG -Symbole

Für Magento 2 angepasst

allgemeine Informationen

Das Paket wurde von Grunn-Webfont erweitert und an Magento 2 mit dem weniger Präprozessor angepasst:
https://www.npmjs.com/package/grunt-webfont

Wichtig

Dieses Plugin benötigt Grunzen 0,4. Beachten Sie, dass ttfautohint optional ist, Ihre generierte Schriftart jedoch nicht ordnungsgemäß angedeutet wird, wenn sie nicht installiert ist. Und stellen Sie sicher, dass Sie ttfautohint 0.97 nicht verwenden, da diese Version nicht funktioniert.
Dieses Plugin erfordert eine Knotenversion <= 12
Wenn die Version größer ist als Sie den Fehler haben:

 ttf2woff2.js:3 Invalid asm.js: Invalid member of stdlib

fontforge ist für den node nicht erforderlich.

Um Ihre Knotenversion herabzustufen

Verwenden Sie NVM

https://github.com/nvm-sh/nvm/blob/master/readme.md

Für OS X können Sie Brew verwenden

 brew unlink node
brew install node@12
brew link --overwrite --dry-run node@12
echo 'export PATH="/usr/local/opt/node@12/bin:$PATH"' >> ~/.zshrc

Installation

Zuerst für alle Betriebssysteme

 npm install grunt-m2webfont --save-dev
// or
yarn add grunt-m2webfont

Os x

 brew install ttfautohint fontforge --with-python

Linux

 sudo apt-get install fontforge ttfautohint

Fenster

Installieren Sie ttfautohint (optional).

Dann fontforge installieren.

Laden und installieren Sie Fontforge.
Fügen Sie C:Program Files (x86)FontForgeBuildsbin zu Ihrer PATH hinzu.

Bereiten Sie SVG -Symbole im Ordner eines Themas vor

Fügen Sie alle SVG -Symbole zum Ordner web/images/icons/font eines erstellten Themas hinzu.
Beispiel:

 app/design/frontend/{vendor}/{theme}/web/images/icons/font/*.svg

Das Modul grunt-m2webfont wird für alle Themen ausgeführt, die hinzugefügt werden

 dev/tools/grunt/configs/themes.js

oder

 dev/tools/grunt/configs/local-themes.js

Wenn die Datei local-themes.js zu einem Inhalt der Datei addiert wurde grunt-config.json im Stammordner eines Projekts.

Führen Sie das Grunt-M2Webfont-Modul aus

Führen Sie einfach den Befehl in einem Terminal aus:

 grunt m2webfont

Wie man benutzt

Nach dem Importieren und Erstellen von Stilen können Sie Styles 'Mixins oder HTML -Klassen verwenden, um ein Symbol hinzuzufügen.

Ersetzen Sie das Fragment {Name} durch den Namen eines Symbols.
Beispiel: @od-icon-arrow-down

WENIGER

Der Mixin .od-icon(@od-icon-{name}) fügt Eigenschaften wie: Inhalt und Schriftfamilie hinzu

 .class::before {
  .od-icon(@od-icon-{name});
}

Html

 <i class="od-icon od-icon-{name}"></i>

Probleme

Erzeugte Schrift hat gebrochene Ikonen

Die Standard -Engine zum Erstellen einer Schriftart ist der Knoten in der Konfigurationsdatei des Grunzens, um Mindestabhängigkeiten zu speichern. Aber erzeugte Symbole könnten gebrochen werden. Um dieses Problem zu beheben fontforge müssen Sie den Motor von node in die Konfiguration ändern.

Nur um die Zeile in der Datei dev/tools/grunt/configs/m2webfont.js zu kommentieren:

 const options = {
  ...
  // engine: 'node',
}

Wenn Sie den Motor nicht auf Optionen einstellen, hat er einen Standardwert -Engine: 'fontforge' .

Um Fontforge zu verwenden, müssen Sie den Motor in Ihrem Betriebssystem installieren.
Siehe Anweisungen oben ( Installation ).
Bauen Sie einfach Symbole nach der Installation um.