字体文件压缩——字蛛(FontSpider)

简介

字蛛(FontSpider) 是一个中文字体压缩器；

字蛛通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符，并将这些字符数据从字体中删除以实现压缩，同时生成跨浏览器使用的格式。

安装

请先确保有NodeJs，然后开始使用

npm install font-spider -g

构建插件：grunt-font-spider | gulp-font-spider

使用

在 CSS 中使用 WebFont

/*声明 WebFont*/
@font-face {
	font-family: "SourceHanSerifCN-Regular";
	src: url('../font/SourceHanSerifCN-Regular.eot');
	src:
	 	url('../font/SourceHanSerifCN-Regular.eot?#font-spider') format('embedded-opentype'),
	    url('../font/SourceHanSerifCN-Regular.woff') format('woff'),
	    url('../font/SourceHanSerifCN-Regular.ttf') format('truetype'),
	    url('../font/SourceHanSerifCN-Regular.svg') format('svg');
  	font-weight: normal;
  	font-style: normal;
}

使用css选择器指定字体

.nav-menu .tel-number{
	font-family: 'SourceHanSerifCN-Regular';
	font-size: 28px;
	letter-spacing: 3px;
	color: #989696;
	margin-left: 16px;
}

1. @font-face 中的 src 定义的 .ttf 文件必须存在，其余的格式将由工具自动生成
2. 开发阶段请使用相对路径的 CSS 与 WebFont

如果只有后缀名为 .otf 的字体文件，也可以使用字体转换工具 FontCreator（百度破解版自行下载就好了）

运行 font-spider 命令

/*加 --debug 能查看日志*/
//单个html文件
font-spider --debug ./index.html

//多个html文件
font-spider --debug ./*.html

可能遇到的问题

有一次一个字体文件怎么压缩都没用，还是源文件的大小，并且也没有生成.eot、.woff、.ttf、.svg这些文件。

我试着换了个网站，重新下了一个该字体的文件，就好了。