字蛛(font-spider), 一个智能 WebFont 压缩工具!
lz在最近的一个项目中需要用到自定义的字体,如下图这样:
由于有很多个这样类似的模块,所以切图的话只会影响页面加载速度,而且工作量太大,所以只能自定义字体,但是字体的太大需要3.6M,这时候就需要将字体压缩了,在以前用到的工具是Fontmin(http://efe.baidu.com/blog/fontmin-getting-started/),以前用的是客户端的方法直接进行压缩,但是这次却遇到的报错,原因未知(当然这个人软件大部分情况下还是挺好用的),如下图所示:
在寻找解决办法无果后,只能另寻他法,最后就发现的font-spider;
源码:https://github.com/aui/font-spider/blob/master/README-ZH-CN.md;
GitHub上面的介绍:字蛛是一个智能 WebFont 压缩工具,它能自动分析出页面使用的 WebFont 并进行按需压缩。
先说一下font-spider的具体使用方法:
1、安装
由于安装font-spider需要依赖于npm(node package manager),即node包管理器,所以得事先安装后node(官网: https://npmjs.org/),然后我们执行
npm install font-spider -g
安装完成后查看font-spider版本号,如果正确显示就说明安装完成了;
2、书写css
/*声明 WebFont*/ @font-face { font-family: 'source'; src: url('../font/字体名称.eot'); src: url('../font/字体名称.eot?#font-spider') format('embedded-opentype'), url('../font/字体名称.woff2') format('woff2'), url('../font/字体名称.woff') format('woff'), url('../font/字体名称.ttf') format('truetype'), url('../font/字体名称.svg') format('svg'); font-weight: normal; font-style: normal; } /*使用指定字体*/ .home h1, .demo > .test { font-family: 'source'; }
*注意:@font-face
中的 src
定义的 .ttf 文件必须存在,其余的格式将由工具自动生成
3、进行压缩
先定位到项目所在地址:cd + 项目地址;
执行font-spider:
font-spider *.html
成功之后在你的项目文件中就会重新生成压缩后的文件了。
当然在使用font-spider中也遇到了问题,如下:
在终端执行font-spider报错:Error: Expecting a function in instanceof check, but got undefined
这时候我们需要修改node_modules\font-spider\src\spider\index.js 文件,注销掉以下代码
以上就是font-spider的基本使用了