ดาวน์โหลด fontfacegen webpack plugin - fontfacegen webpack plugin ซอร์สโค้ดดาวน์โหลด

fontfacegen webpack plugin

ดาวน์โหลดแบบอักษร

1.0.0

ดาวน์โหลด

Fontfacegen-Webpack-Plugin

ปลั๊กอินนี้ช่วยให้คุณสามารถแปลงไฟล์. ttf และ .OTF เป็นรูปแบบฟอนต์อื่น ๆ เช่น. eoT, .ttf, .svg, .woff และ .woff2 โดยใช้ fontfacegen แพ็คเกจ NPM ที่มีอยู่

               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` ในไดเรกทอรีจะถูกแปลง
	- ไฟล์. ไฟล์เดียวนั้นจะถูกแปลง
ชุดย่อย	สตริงหรืออาร์เรย์ที่มีอักขระที่ต้องการจะรวมอยู่ในแบบอักษรที่สร้างขึ้น