font-spider利器对webfont网页字体压缩使用 图文教程

为什么要使用字蛛?

由于中文的字体体积太大,一般都是几M以上。英文字体文字部分由26个字母组成,所以字体文件通常不会太大;而中文汉字数量总共约有九万左右, 国标(GB)字库 有6763字, 而根据《现代汉语常用字表》统计数据,常用汉字也要有3500个左右。 中文字体文件通常都会几M的大小,参照现在中国的网络环境,显然不适合在项目中使用。

原理:

1.爬行本地 html 文档,分析所有 css 语句
2.记录@font-face语句声明的字体,并且记录使用该字体的 css 选择器
3.通过 css 选择器的规则查找当前 html 文档的节点,记录节点上的文本
4.找到字体文件并删除没被使用的字符
5.编码成跨平台使用的字体格式

简而言之:就是爬出你项目中所使用的文字保留起来,删除没被使用到的文字,并重新打包。

安装

npm install font-spider -g

使用

hyheilizhitij(汉仪黑荔枝体简)

1.通过font-face引入我们下载好的文件

@font-face{
			font-family: 'myfont';
			src:url('./fonts/HYHeiLiZhiTiJ.ttf') format('truetype');
			font-weight: normal;
			font-style: normal;
		}

2.使用自定义字体

.test{font-family: 'myfont';}

3.执行font-spider命令压缩字体
运行font-spider命令 ,页面依赖的字体将会自动压缩好,原 .ttf 字体会备份

font-spider ./index.html

压缩之前是1753.24 KB大小,压缩之后大小4.796 KB
Original size: 1753.24 KB
File fonts/HYHeiLiZhiTiJ.ttf created: 4.796 KB

完整代码

<div class="test">
		账号未登录
	</div>
	<style>
		@font-face{
			font-family: 'myfont';
			src:url('./fonts/HYHeiLiZhiTiJ.ttf') format('truetype');
			font-weight: normal;
			font-style: normal;
		}
		.test{
			font-family: 'myfont';
		}
	</style>

腾讯云限时秒杀【点击购买】

搬瓦工,CN2高速线路,1GB带宽,电信联通优化KVM,延迟低,速度快,建站稳定,搬瓦工BandwagonHost VPS优惠码BWH26FXH3HIQ,支持<支付宝> 【点击购买】!

Vultr$3.5日本节点,512M内存/500G流量/1G带宽,电信联通优化,延迟低,速度快【点击购买】!

阿里云香港、新加坡VPS/1核/1G/25G SSD/1T流量/30M带宽/年付¥288【点击购买】


`微信`扫码 加好友

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注