Bootstrap

vue-使用字蛛font-spider压缩字体文件 解决字体加载慢问题

写了一个小活动,产品给了特殊字体文件,要求其中一个页面使用特殊字体
引入 使用等都没问题
但在移动端看时,加载非常慢,四五行字先是默认字体,最后又闪现成特殊字体
解决方法如下

1.安装

npm install font-spider -g

2.检索文字并进行压缩

如何你是纯html项目,可以直接压缩,但想vue这种脚手架,一级目录他会检索不到html,而且我们的vue文件他也是检索不到的,所以我们需要先在入口hmtl文件的同级目录下新建一个ceshi.html文件,然后把我们需要用到特殊字体的那些文字全部写进去,并在ceshi.html引入特殊字体,vue中如何引入特殊字体(这里就不多阐述了,网上很多);
然后我们在两个html的目录下打开命令窗口 输入
font-spider ceshi.html
这时,外层的字体文件就是被压缩过后的,.font-spider里就是未压缩的源文件
在这里插入图片描述
我们在去移动端上查看服务时,特殊字体加载就不会卡顿了,解决啦啦啦啦啦啦啦啦

;