官网网址为http://font-spider.org/
字蛛通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符,并将这些字符数据从字体中删除以实现压缩,同时生成跨浏览器使用的格式。
运行该程序,电脑需要先下载node应用程序,下载node步骤很简单,找到安装程序(nodejs百度云盘分享地址),按提示下一步下一步。。。最后安装完成
下载字蛛,全局安装
npm install font-spider -g
安装完毕,检查是否安装成功可以,font-spider -V,查看版本,显示如下说明安装成功
特别注意的是,字蛛查看版本的命令一定要是大写的V
使用字蛛
在css文件中使用 WebFont:
/*声明 WebFont*/
@font-face {font-family: 'pinghei';src: url('../font/pinghei.eot');src:url('../font/pinghei.eot?#font-spider') format('embedded-opentype'),url('../font/pinghei.woff') format('woff'),url('../font/pinghei.ttf') format('truetype'),url('../font/pinghei.svg') format('svg');font-weight: normal;font-style: normal;
}/*使用选择器指定字体*/
.home h1, .demo > .test {font-family: 'pinghei';
}
官方提醒注意事项:
1. @font-face 中的 src 定义的 .ttf 文件必须存在,其余的格式将由工具自动生成
2. 开发阶段请使用相对路径的 CSS 与 WebFont
运行 font-spider 命令
font-spider ./demo/*.html
———————————————————————————————————————————————————————-—
举例说明如下:
运行成功后你会发现,font文件夹会把你之前的很大的ttf文件备份在新生成的.font-spider文件夹下,在font文件夹下生成好几个压缩的很小的字体文件,可自行查看文件大小。如图:
注意:我第一次测试一直也没有成功,也没有任何报错,我怀疑是之前运行的代码有缓存,第二次运行一下就成功了,所以如果没有任何报错的前提下没有成功,建议多建几个案例尝试下!