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]',然后才能和本地的原文件对得上

猜你喜欢

转载自www.cnblogs.com/caelan/p/10372882.html
今日推荐