webfont
11.2.20 (2021-07-31)
ตัวสร้างแบบอักษรจากไอคอน SVG
WOFF2 , WOFF , EOT , TTF และ SVG ;JavaScript , JSON หรือ YAML เพื่อระบุข้อมูลการกำหนดค่าสำหรับไดเรกทอรีทั้งหมดและไดเรกทอรีย่อยทั้งหมดcss , scss , styl ฯลฯ );gulp , grunt หรือเครื่องมือใหญ่อื่น ๆ ;linux , windows และ osx );npm install --save-dev webfont import webfont from "webfont" ;
webfont ( {
files : "src/svg-icons/**/*.svg" ,
fontName : "my-font-name" ,
} )
. then ( ( result ) => {
// Do something with result
Function . prototype ( result ) ;
// Or return it
return result ;
} )
. catch ( ( error ) => {
throw error ;
} ) ;หรือ
const webfont = require ( "webfont" ) . default ;
webfont ( {
files : "src/svg-icons/**/*.svg" ,
fontName : "my-font-name" ,
} )
. then ( ( result ) => {
// Do something with result
Function . prototype ( result ) ;
// Or return it
return result ;
} )
. catch ( ( error ) => {
throw error ;
} ) ;filesstring | arraynode_modules และ bower_components จะถูกละเว้นเสมอ configFilestring(JSON, YAML, or CommonJS) หรือชื่อของโมดูลใน node_modules ที่ชี้ไปที่หนึ่งconfigFile , WebFont จะค้นหาแผนผังไดเรกทอรีสำหรับไฟล์การกำหนดค่าในสถานที่ต่อไปนี้ในลำดับนี้:webfont ใน package.json.webfontrc ไฟล์ (มีหรือไม่มีส่วนขยายชื่อไฟล์: .json , .yaml และ .js มีอยู่)webfont.config.js ส่งออก object JS การค้นหาจะเริ่มต้นในไดเรกทอรีการทำงานและเลื่อนแผนผังไดเรกทอรีจนกว่าจะพบไฟล์การกำหนดค่า fontNamestringwebfontformatsarray['svg', 'ttf', 'eot', 'woff', 'woff2'] ,svg, ttf, eot, woff, woff2 ,template ประเภท: string
ค่าเริ่มต้น: null
ค่าที่เป็นไปได้: css , scss , styl (รู้สึกอิสระที่จะมีส่วนร่วมมากขึ้น)
หมายเหตุ: หากคุณต้องการใช้เทมเพลตที่กำหนดเองให้ใช้ตัวเลือกนี้ผ่านใน string พา ธ เช่นนี้:
webfont ( {
template : "./path/to/my-template.css" ,
} ) ;หรือ
webfont ( {
template : path . resolve ( __dirname , "./my-template.css" ) ,
} ) ;หรือ
webfont ( {
template : path . resolve ( __dirname , "./my-template.styl" ) ,
} ) ; templateClassNamestringnulltemplateFontPathstring./CSS templateFontNamestringfontName หากไม่ได้ตั้งค่า แต่คุณสามารถระบุค่าใด ๆligaturesbooleantrueglyphTransformFn ประเภท: function
ค่าเริ่มต้น: null
คำอธิบาย: หากคุณต้องการแปลงเมตาดาต้าสัญลักษณ์ (เช่นชื่อของคลาส CSS หรือ Unicode) ก่อนที่จะถ่ายโอนในเทมเพลตสไตล์ของคุณสำหรับไอคอนของคุณคุณสามารถใช้ตัวเลือกนี้กับวัตถุเมตา Glyphs
ตัวอย่าง:
import webfont from "webfont" ;
webfont ( {
files : "src/svg-icons/**/*.svg" ,
glyphTransformFn : ( obj ) => {
obj . name += "_transform" ;
something ( ) ;
return obj ;
} ,
} )
. then ( ( result ) => {
// Do something with result
Function . prototype ( result ) ;
// Or return it
return result ;
} )
. catch ( ( error ) => {
throw error ;
} ) ; sortbooltrueสิ่งเหล่านี้สามารถผนวกเข้ากับตัวเลือก WebFont ได้ สิ่งเหล่านี้จะถูกส่งโดยตรงไปยัง SVGICONS2SVGFONT
svgicons2svgfont.fontNamestringsvgicons2svgfont.fontIdstringfontNamesvgicons2svgfont.fontStylestring''svgicons2svgfont.fontWeightstring''svgicons2svgfont.fixedWidthbooleanfalsesvgicons2svgfont.centerHorizontallybooleanfalsesvgicons2svgfont.normalizebooleanfalsesvgicons2svgfont.fontHeightnumberMAX(icons.height)svgicons2svgfont.roundnumber10e12 การตั้งค่าเส้นทาง SVG การปัดเศษ svgicons2svgfont.descentnumber0svgicons2svgfont.ascentnumberfontHeight - descentsvgicons2svgfont.metadatastringundefinedsvgicons2svgfont.logfunctionconsole.logfunction(){} เพื่อปิดใช้งานการบันทึก อินเทอร์เฟซสำหรับการใช้บรรทัดคำสั่งค่อนข้างง่ายในขั้นตอนนี้ดังที่เห็นในส่วนการใช้งานต่อไปนี้
เพิ่มสคริปต์ cli ลงในวัตถุ scripts ของไฟล์ package.json ของคุณ:
{
"scripts" : {
"webfont" : " node node_modules/webfont/dist/cli.js "
}
}หากคุณใช้ Cross-ENV:
{
"scripts" : {
"webfont" : " cross-env node_modules/webfont/dist/cli.js "
}
} Usage: webfont [input] [options]
Input: File(s) or glob(s).
If an input argument is wrapped in quotation marks, it will be passed to " fast-glob "
for cross-platform glob support.
Options:
--config
Path to a specific configuration file (JSON, YAML, or CommonJS)
or the name of a module in ` node_modules ` that points to one.
If no ` --config ` argument is provided, webfont will search for
configuration files in the following places, in this order:
- a ` webfont ` property in ` package.json `
- a ` .webfontrc ` file (with or without filename extension:
` .json ` , ` .yaml ` , and ` .js ` are available)
- a ` webfont.config.js ` file exporting a JS object
The search will begin in the working directory and move up the
directory tree until a configuration file is found.
-f, --font-name
The font family name you want, default: " webfont " .
-h, --help
Output usage information.
-v, --version
Output the version number.
-r, --formats
Only this formats generate.
-d, --dest
Destination for generated fonts.
-m, --dest-create
Create destination directory if it does not exist.
-t, --template
Type of template ( ` css ` , ` scss ` , ` styl ` ) or path to custom template.
'
-s, --dest-template
Destination for generated template. If not passed used `dest` argument value.
-c, --template-class-name
Class name in css template.
-p, --template-font-path
Font path in css template.
-n, --template-font-name
Font name in css template.
--no-sort
Keeps the files in the same order of entry
--verbose
Tell me everything!.
For "svgicons2svgfont":
--font-id
The font id you want, default as "--font-name".
--font-style
The font style you want.
--font-weight
The font weight you want.
--fixed-width
Creates a monospace font of the width of the largest input icon.
--center-horizontally
Calculate the bounds of a glyph and center it horizontally.
--normalize
Normalize icons by scaling them to the height of the highest icon.
--font-height
The outputted font height [MAX(icons.height)].
--round
Setup the SVG path rounding [10e12].
--descent
The font descent [0].
--ascent
The font ascent [height - descent].
--start-unicode
The start unicode codepoint for files without prefix [0xEA01].
--prepend-unicode
Prefix files with their automatically allocated unicode codepoint.
--metadata
Content of the metadata tag.
--add-hash-in-font-url
Generated font url will be : [webfont].[ext]?v=[hash]
CLI สามารถออกจากกระบวนการด้วยรหัสทางออกต่อไปนี้:
webpackttf2woff2 ด้วยไลบรารี JS ดั้งเดิม);อย่าลังเลที่จะผลักดันรหัสของคุณหากคุณเห็นด้วยกับการเผยแพร่ภายใต้ใบอนุญาต MIT
ตรวจสอบการเปลี่ยนแปลงของเรา
ตรวจสอบใบอนุญาตของเรา
