字蛛的用法

官网网址为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文件夹下生成好几个压缩的很小的字体文件，可自行查看文件大小。如图：

注意：我第一次测试一直也没有成功，也没有任何报错，我怀疑是之前运行的代码有缓存，第二次运行一下就成功了，所以如果没有任何报错的前提下没有成功，建议多建几个案例尝试下！