font-spider-plus，字体压缩插件使用笔记

font-spider-plus使用笔记， fsp是一个腾讯的大佬改版后的font-soider

 

主要思路是 采集线上网页使用到的字体，从字体文件中分离出来，完成大幅度压缩，

 

1，npm i font-spider-plus -g

2，css中定义好font-face （ttf需要存在），其他配好可自动生成，不配则不会，
有个坑，如果是webpack打包的stylus，sass等，配上不存在的问题会抱错，
而且还有个坑，可能是压缩的问题，fontface放在最前面 莫名其妙消息了一行，我放在了后面一行

3，需要压缩的本地webfont 比如 fsp *.html,home/*.htm

4，执行fsp init 生成配置文件fspconfig.js 

localPath： "../font", 是本地路径，把要需要压缩的字体文件放在里面，待会会生成压缩好的文件夹
onlintpath： "../font"， 是线上的地址，比如开发环境里面的字体路径就是他
url: "http://127.0.0.1:5199/play.html" 是线上的网址，会根据请求和css收集要压缩的字体文件和文字

最后执行，fsp run

注意： 是到线上取到要压缩的字体 和 用到的文字 在本地的字体文件进行压缩，
特别是路径要注意，本地的，他会生成一个fsp的虚拟文件，需要上一层 ../ 再取要的路径

建议：开发完成后，在本地开发环境作为线上，拿到压缩好的字体文件，然后替换字体文件，编译后放服务器

可在任意目录下完成操作

ps：
1，我修改了 本地modules的备份文件夹的名字，
2，weboack，字体的url-loader建议名字不用hash，用原来的 '[name].[ext]'，然后才能和本地的原文件对得上

转载于:https://www.cnblogs.com/caelan/p/10372882.html