minify الخط بسلاسة
$ npm install --save fontminيدعم Fontmin v2.x وحدات ES فقط ، وتشغيلها على العقدة V16+.
إذا كنت بحاجة إلى استخدام إصدار CommonJS ، فيرجى تثبيت fontmin v1.x :
تثبيت NPM -save fontmin@1
import Fontmin from 'fontmin' ;
const fontmin = new Fontmin ( )
. src ( 'fonts/*.ttf' )
. dest ( 'build/fonts' ) ;
fontmin . run ( function ( err , files ) {
if ( err ) {
throw err ;
}
console . log ( files [ 0 ] ) ;
// => { contents: <Buffer 00 01 00 ...> }
} ) ;يمكنك استخدام Gulp-trime لإعادة تسمية ملفاتك:
import Fontmin from 'fontmin' ;
const rename = require ( 'gulp-rename' ) ;
const fontmin = new Fontmin ( )
. src ( 'fonts/big.ttf' )
. use ( rename ( 'small.ttf' ) ) ; يخلق مثيل Fontmin جديد.
النوع: Array|Buffer|String
اضبط الملفات المراد تحسينها. يأخذ المخزن المؤقت أو سلسلة الكرات أو مجموعة من سلاسل الكرة الأرضية كحجة.
اكتب: String
قم بتعيين مجلد الوجهة إلى المكان الذي سيتم فيه كتابة ملفاتك. إذا لم تقم بتعيين أي وجهة ، فلن تتم كتابة ملفات.
النوع: Function
أضف plugin إلى مكدس الوسيطة.
النوع: Function
قم بتحسين ملفاتك مع الإعدادات المحددة.
سيقوم رد الاتصال بإرجاع مجموعة من ملفات الفينيل في files ودفق قابل للقراءة/القابل للكتابة في stream
يتم تجميع الإضافات التالية مع fontmin:
ضغط TTF بواسطة Glyph.
import Fontmin from 'fontmin' ;
const fontmin = new Fontmin ( )
. use ( Fontmin . glyph ( {
text : '天地玄黄 宇宙洪荒' ,
hinting : false // keep ttf hint info (fpgm, prep, cvt). default = true
} ) ) ;تحويل TTF إلى EOT.
import Fontmin from 'fontmin' ;
const fontmin = new Fontmin ( )
. use ( Fontmin . ttf2eot ( ) ) ;تحويل TTF إلى woff.
import Fontmin from 'fontmin' ;
const fontmin = new Fontmin ( )
. use ( Fontmin . ttf2woff ( {
deflate : true // deflate woff. default = false
} ) ) ;تحويل TTF إلى Woff2.
import Fontmin from 'fontmin' ;
const fontmin = new Fontmin ( )
. use ( Fontmin . ttf2woff2 ( ) ) ;تحويل TTF إلى SVG.
يمكنك استخدام ImageMin-Svgo لضغط SVG:
import Fontmin from 'fontmin' ;
const svgo = require ( 'imagemin-svgo' ) ;
const fontmin = new Fontmin ( )
. use ( Fontmin . ttf2svg ( ) )
. use ( svgo ( ) ) ;إنشاء CSS من TTF ، وغالبا ما تستخدم لجعل iconfont.
import Fontmin from 'fontmin' ;
const fontmin = new Fontmin ( )
. use ( Fontmin . css ( {
fontPath : './' , // location of font file
base64 : true , // inject base64 data:application/x-font-ttf; (gzip font with css).
// default = false
glyph : true , // generate class for each glyph. default = false
iconPrefix : 'my-icon' , // class prefix, only work when glyph is `true`. default to "icon"
fontFamily : 'myfont' , // custom fontFamily, default to filename or get from analysed ttf file
asFileName : false , // rewrite fontFamily as filename force. default = false
local : true // boolean to add local font. default = false
} ) ) ; بدلاً من ذلك ، يمكن تمرير وظيفة التحويل كخيار fontFamily .
import Fontmin from 'fontmin' ;
const fontmin = new Fontmin ( )
. use ( Fontmin . css ( {
// ...
fontFamily : function ( fontInfo , ttf ) {
return "Transformed Font Family Name"
} ,
// ...
} ) ) ;تحويل تنسيق الخط SVG إلى TTF.
import Fontmin from 'fontmin' ;
const fontmin = new Fontmin ( )
. src ( 'font.svg' )
. use ( Fontmin . svg2ttf ( ) ) ;CONCAT SVG ملفات إلى TTF ، تمامًا مثل CSS Sprite.
عمل رائع مع البرنامج المساعد CSS:
import Fontmin from 'fontmin' ;
const fontmin = new Fontmin ( )
. src ( 'svgs/*.svg' )
. use ( Fontmin . svgs2ttf ( 'font.ttf' , { fontName : 'iconfont' } ) )
. use ( Fontmin . css ( {
glyph : true
} ) ) ;تحويل OTF إلى TTF.
import Fontmin from 'fontmin' ;
const fontmin = new Fontmin ( )
. src ( 'fonts/*.otf' )
. use ( Fontmin . otf2ttf ( ) ) ; $ npm install -g fontmin$ fontmin --help
Usage
$ fontmin < file > [ < output > ]
$ fontmin < directory > [ < output > ]
$ fontmin < file > > < output >
$ cat < file > | fontmin > < output >
Example
$ fontmin fonts/ * build
$ fontmin fonts build
$ fontmin foo.ttf > foo-optimized.ttf
$ cat foo.ttf | fontmin > foo-optimized.ttf
Options
-t, --text require glyphs by text
-b, --basic-text require glyphs with base chars
-d, --deflate-woff deflate woff
--font-family font-family for @font-face CSS
--css-glyph generate class for each glyf. default = false
-T, --show-time show time fontmin cost يمكنك استخدام curl لإنشاء خط لمواقع الويب التي تعمل على PHP و ASP و Rails والمزيد:
$ text= ` curl www.baidu.com ` && fontmin -t " $text " font.ttfأو يمكنك استخدام HTML إلى Text لجعله أصغر:
$ npm install -g html-to-text
$ text= ` curl www.baidu.com | html-to-text ` && fontmin -t " $text " font.ttf ما هو أكثر من ذلك ، يمكنك استخدام Phantom-Betch-Cli لإنشاء خط لرفع SPA Running JS:
$ npm install -g phantom-fetch-cli
$ text= ` phantom-fetch http://www.chinaw3c.org ` && fontmin -t " $text " font.ttfMIT © fontmin