Vue3——压缩字体font-spider,完美解决字体压缩后会出现字体消失现象

Nanchen_42 2022-09-23 07:46:01 阅读数:896

vue字体压缩vue3font-spider

Vue项目打包字体完整版教程

如果打包的时候字体太大,可以选择压缩字体进行处理
打包前:请添加图片描述

打包后:请添加图片描述

可以看到,区别还是很明显的,下面是使用方法
这里可以使用字蛛font-spider来进行压缩

字蛛font-spider

npm install font-spider -g

安装完成后即可使用,首先我们需要把之前不管在什么地方使用的字体样式拿到index.html页面下
请添加图片描述

请添加图片描述

引入好后再次输出以下命令

font-spider index.html

打包成功!
请添加图片描述

这个时候他就会把你之前的字体压缩好,并且将原来大小的字体放在一个名为font-spider文件夹中
请添加图片描述

解决Vue项目打包后出现字体初始化现象

注意!!!这里如果打包成功Vue项目并没有得到你想要引入的字体,变成了原来的初始化字体,原因只有一点!往下看!

我们这里必须要定义一个html,里面要存放字体所需的所有文字
 <div style="font-family: HYDJT;">12</div>
<h1 style="font-family: CLNTT;">确认 取消 123页面</h1>

尝试压缩一次

font-spider *.html

压缩完毕后在html页面中打开查看效果
在这里插入图片描述
这里是没问题的,但是如果你再次在里面添加文字

 <div style="font-family: HYDJT;">你好,欢迎NanChen Web的博客</div>
<h1 style="font-family: CLNTT;">确认 取消 123页面</h1>

再次查看效果:
在这里插入图片描述
这里可以看到,压缩过的字体文件中并没有拥有我这段文字中的所有字体样式。因为我的html文件里没有定义我需要保留哪些字体的文字,后面的欢迎NanChen Web的博客是我压缩后才添加的,所以他没有识别到我再次添加的字体;同理这就是有些人的Vue文件中的字体没显示的道理一样。
因为你没有在html页面里输入你想保留的字体,所以他压缩原理是根据你html里写的字数来保存字体大小(意思就是需要你在使用这段命令行之前font-spider *.html对字体进行保留)
就比如这个标签 <div style="font-family: HYDJT;">你好,欢迎NanChen Web的博客</div>我这个字体的类名叫HYDJT,那么这个字体只会保留你好,欢迎NanChen Web的博客这几个字体,所谓的压缩就是将你不需要的文字全部清空。


这里我们添加好文字后再次压缩一下

font-spider *.html

在这里插入图片描述
可以看到这样就已经成功了!


尾声:目前的话这个font-spider只支持静态资源压缩,如果你是服务器端的数据不能动态获取,如果一定要使用font-spider的话那就把常用汉字数字标点符号全部拿下来放在字体样式中。

版权声明:本文为[Nanchen_42]所创,转载请带上原文链接,感谢。 https://blog.csdn.net/nanchen_J/article/details/126973856