web字体的使用和说明太大加载太慢，是前端的大问题。作为一个前端新手，看不懂文档也是一个通病，但还是花了一些时间和朋友研究了这个问题，找到的解决办法是“WordSpider”。Zispider官网：http://font-spider.orgGitHub源代码：https://github.com/aui/font-s...Zispider介绍：官方声明“Fontspider是一款中文字体压缩器”。Wordspider分析本地的CSS和HTML文件，获取WebFont中没有使用到的字符，并将这些字符数据从字体中去除，实现压缩，同时生成可以跨浏览器使用的格式。Zispider的API：Zispider在GitHub中有4个API。1.dest压缩多个HTML文件的WebFonts：font-spiderdest/*.html2.--info显示网站使用的WebFonts：font-spider--infohttp://fontawesome.io3.--ignore忽略文件：font-spider--ignore"icon\\.css$"dest/*.html4.--map该参数会将WebFont的在线页面映射到本地，然后压缩（本地路径必须是绝对路径）：font-spider--map"http://font-spider.org/font,/Website/font"http://font-spider.org/index.html看官网和github比较清楚，但是比较难对我来说看文档，也花了很长时间才弄明白，所以说一下使用过程和一些需要注意的地方。1.先按照官网安装NodeJS然后执行：npminstallfont-spider-g安装成功后可以使用'font-spider-V'查看是否安装成功。2.在CSS中使用Webfont：@font-face{font-family:'fontname';src:url('../font/字体名称.eot');src:url('../font/font-name.eot?#font-spider')format('embedded-opentype'),url('../font/font-name.woff2')format('woff2'),url('../font/font-name.woff')format('woff'),url('../font/fontname.ttf')format('truetype'),url('../font/字体名称.svg')format('svg');字体粗细：正常；字体样式：正常；}//字体名称是用户自定义的，根据自己的要求来命名即可。官网上有两点需要注意：1、@font-face中src定义的.ttf文件必须存在，其余格式由工具自动生成。2.开发时请使用相对路径的CSS和WebFont。使用时，直接复制以上部分代码即可。特别注意：1.官网第一个注意，ttf格式必须存在，即ttf格式必须根据相对路径找到文件。不要更改任何其他内容，只需将字体名称更改为自定义字体即可。（我当时改了其他的结果没生效）2.“../font/”改成你自己的路径。建议与ttf格式字体的路径相同。执行命令后，会自动备份并压缩原来的ttf格式。其他格式会直接放在这个路径下。3、运行font-spider命令：在node.js命令提示符下，直接输入需要压缩的页面font-spider./demo/*.html。按照网页的介绍，经过这三个步骤，你会发现字体已经压缩完成，可以在正式使用前先用demo试一下。根据开发，我们一般会把HTML按照不同的分类放到不同的文件夹中，但是如何同时抓取这些词呢？这时候，我们可以使用github中font-spider给出的API“dest”。GitHub有一个例子：“font-spiderdest/news.htmldest/index.htmldest/about.html”从这个例子中，我们可以发现我们可以直接压缩几个页面或者文件夹的字体，但是每次上线前都要写一长串不同的路径和文件名，真的很头疼。为了解决这个问题，我们写了一个bash脚本给大家使用，只要在每个项目上线前写好html所在文件夹的路径，这个脚本就会自动遍历这个文件夹下的所有html文件，压缩并执行font-spider命令直接生成字体，当然如果文件夹中有其他类型的文件，这个脚本也可以忽略其他文件，只遍历HTML文件。脚本的使用方法及其他需要注意的事项：1.使用前需要先安装bash，我用的是GitBash2.openin后g脚本，会出现一句“pleaseinputbuildpath:”，然后写上你需要压缩的文件夹路径，执行wordspider，回车执行命令，执行完窗口自动关闭是成功的。如图：3.不建议使用nodeJs版本太高。我用的8.x版本没有成功，后来改成6.x版本成功了。看了别人的文档，发现可能也和npm有关。如果npm版本太高，将无法执行成功。4.其他文档也说了Spider的使用有陷阱，但是我在使用中没有遇到过，这里不再赘述。最后附上脚本的下载链接（上次脚本有点问题，已经修改测试没问题）：http://pan.baidu.com/s/1kVf1b4z
