Postcss plugin that minify font file and inline as base64 in stylesheet.
fontsize goes through every
@font-face and try to find the local font declared by
src: url('font.ttf'), then minifies the font and replace the url with base64. The characters that are not appeared in
text will be ignore and thus the filesize of font can be greatly cut down.
$ npm i -D fontsize
const content = fsconst opts =pathtext: 'hello world'// ORfontsize
/* raw stylesheet *//* transformed */
<!-- html -->hello worldhello worldmiss
font-facesrc declaration, give the
urlparameter and return the realpath of your local font file. Default to
url => path.resolve(url).
With postcss-loader, fontsize is avaliable in Webpack.
// webpack.config.base.jsconst path =const autoprefixer =const fontsize =moduleexports =module:loaders:test: /\.styl$/loaders: /style!css!postcss!styl/postcss:plugins:autoprefixer
It's recommended to write your expected characters in a single file, so that you can easily get them and post to fontsize.
const text =// ORconst text = fs
Regexp is useful when dealing with Chinese characters. It reads
content.html as a string and remove all non-Chinese characters.
const text = fs
If your characters are seperated in multiple files, maybe you need glob to deal with the terrible mess.
const files = globconst text = files
Just take it easy to manage your characters.
By default when found more that one font in the stylesheet, fontsize will minify each font with the same text that you give. If you want to handle each font with difference text, just give text as an object with the key the same as font's filename.
const content = fsconst text =FZHTJT: 'hello world'SentyBrush: 'some others'fontsize
When we get a fat font after minified, it's a good idea to extract the base64 font from the stylesheet.
const content = fsconst text = 'hello world'const resolveUrl = pathfontsize
$ npm i && npm test