fontfacegen webpack plugin -Download - fontfacegen webpack plugin -Quellcode herunterladen

fontfacegen webpack plugin

Schriftarten herunterladen

1.0.0

Herunterladen

FontaceGen-Webpack-Plugin

Mit diesem Plugin können Sie .ttf- und .OTF -Dateien in verschiedene andere Schriftformate wie .eot, .ttf, .svg, .woff und .woff2 mit dem vorhandenen NPM -Paket fontfacegen umwandeln.

               fontfacegen
fontfile.ttf ---------------> fontfile.ttf
                              fontfile.eot
                              fontfile.svg
                              fontfile.woff
                              fontfile.woff2

Installieren

 npm install fontfacegen
npm install fontfacegen-webpack-plugin

Verwendung

Erfordern Sie das Modul fontfacegen-webpack-plugin , erstellen Sie eine Instanz von FontfacegenWebpackPlugin und geben Sie die Instanz an das Plugins-Array weiter.

 const FontfacegenWebpackPlugin = require ( 'fontfacegen-webpack-plugin' )

module . exports = {
  entry : 'index.js' ,
  output : {
    path : 'dist' ,
    filename : 'index_bundle.js'
  } ,
  plugins : [
    new FontfacegenWebpackPlugin ( { tasks : [ 'fontfile.ttf' , 'anotherfont.otf' ] } )
  ]
}

Dies generiert die folgenden Dateien:

dist/fontfile.eot
dist/fontfile.ttf
dist/fontfile.svg
dist/fontfile.woff
dist/fontfile.woff2
dist/anotherfont.eot
dist/anotherfont.ttf
dist/anotherfont.svg
dist/anotherfont.woff
dist/anotherfont.woff2

Sie können dann diese Dateien in Ihrem Code verweisen.

 @font-face {
  src : url ( "dist/fontfile.eot" );
  src : url ( "dist/fontfile.eot?#iefix" ) format ( "embedded-opentype" ) ,
    url ( "dist/fontfile.woff2" ) format ( "woff2" ) ,
    url ( "dist/fontfile.woff" ) format ( "woff" ) ,
    url ( "dist/fontfile.ttf" ) format ( "ttf" ) ,
    url ( "dist/fontfile.svg" ) format ( "svg" );
  font-family : fontfile;
  font-style : normal;
  font-weight : normal;
}

@font-face {
  src : url ( "dist/anotherfont.eot" );
  src : url ( "dist/anotherfont.eot?#iefix" ) format ( "embedded-opentype" ) ,
    url ( "dist/anotherfont.woff2" ) format ( "woff2" ) ,
    url ( "dist/anotherfont.woff" ) format ( "woff" ) ,
    url ( "dist/anotherfont.ttf" ) format ( "ttf" ) ,
    url ( "dist/anotherfont.svg" ) format ( "svg" );
  font-family : anotherfont;
  font-style : normal;
  font-weight : normal;
}

Dokumentation

Das fontfacegen-webpack-plugin Modul exportiert eine einzelne Klasse: FontfacegenWebpackPlugin

Eine Instanz dieses Objekts wird an das Plugins -Array der Konfigurationsoptionen von WebPack übergeben.

Der Konstruktor nimmt ein Objekt als erstes Argument an:

Eigentum	Beschreibung
Aufgaben	Array von Verzeichnissen oder Dateipfaden.
	- Verzeichnis: Dateien mit der Erweiterung `.ttf` und `.otf` im Verzeichnis werden konvertiert.
	- Datei. Diese einzelne Datei wird konvertiert.
Teilmenge	Eine Zeichenfolge oder ein Array mit den Zeichen, die in den generierten Schriftarten aufgenommen werden sollten.