fontfacegen webpack pluginのダウンロードfontfacegen webpack pluginインソースコードダウンロード

fontfacegen webpack plugin

フォントのダウンロード

1.0.0

ダウンロード

fontfacegen-webpack-plugin

このプラグインを使用すると、既存のNPMパッケージfontfacegenを使用して、.ttfおよび.otfファイルを.eot、.ttf、.svg、.woff、.woff2などの他のさまざまなフォント形式に変換できます。

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

インストール

 npm install fontfacegen
npm install fontfacegen-webpack-plugin

使用法

モジュールfontfacegen-webpack-pluginが必要で、 FontfacegenWebpackPluginのインスタンスを作成し、インスタンスをプラグインアレイに渡します。

 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' ] } )
  ]
}

これにより、次のファイルが生成されます。

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

その後、これらのファイルをコードに参照できます。

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

ドキュメント

fontfacegen-webpack-pluginモジュールのデフォルトは、単一のクラス： FontfacegenWebpackPluginをエクスポートします

このオブジェクトのインスタンスは、Webpackの構成オプションのプラグインアレイに渡されます。

コンストラクターは、オブジェクトを最初の引数として取得します。

財産	説明
タスク	ディレクトリまたはファイルパスの配列。
	-directory：ディレクトリ内の拡張子`.ttf`および`.otf`を備えたファイルが変換されます。
	- ファイル。その単一のファイルは変換されます。
サブセット	生成されたフォントの内部に含めることを望む文字を持つ文字列または配列。