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配置選項的插件陣列。

構造函數將對像作為其第一個參數：

財產	描述
任務	目錄或文件路徑數組。
	- 目錄：將轉換為目錄中的帶有`.ttf`和`.otf`文件。
	- 文件。該文件將被轉換。
子集	帶有想要包含在生成字體中的字符的字符串或數組。