本文最后更新于 2024-07-18，文章内容可能已经过时。

最近给博客整了一套字体 荆南麦圆体-v1.300 大小一共 8m ，在网速达标的情况下，加载字体的速度并不是特别慢，但是切换比较差的网络环境之后，打开网站，发现进度条一直在加载中...此时打开console -> network 看了网络资源加载情况，看到了一个 otf 字体文件正在缓慢的加载中 此时网站字体并没有来的及显示出来，于是网上冲浪寻找字体压缩的答案~ 此时就有了 font-spider 的舞台!

字体文件格式

首先了解下字体文件格式有哪几种

  1. TrueType Font (TTF)：由苹果公司和微软公司共同开发的一种字体格式，广泛用于Windows、Mac OS和Linux操作系统。TTF字体文件具有良好的兼容性和可扩展性。

  2. OpenType Font (OTF)：是TrueType字体的扩展，由微软和Adobe公司共同开发。OTF格式支持更多的字符和更复杂的排版功能，如连字、小型大写字母等。OTF格式同样被广泛应用于多种操作系统。

  3. PostScript Font (PSF)：由Adobe公司开发，主要用于PostScript打印机和排版系统。PSF字体分为Type 1和Type 3两种格式，其中Type 1是较为常见的格式。

  4. Web Open Font Format (WOFF)：专为网页设计的字体格式，它基于TrueType或OpenType字体格式，并增加了压缩和元数据支持，以提高网页字体的加载速度和兼容性。

  5. Web Open Font Format 2 (WOFF2)：WOFF的改进版，提供了更高的压缩率，从而减少了字体文件的大小，加快了网页的加载速度。

  6. Embedded OpenType (EOT)：微软公司开发的一种字体格式，主要用于优化网页字体的传输。EOT格式的字体文件较小，但主要被旧版的Internet Explorer浏览器支持。

  7. Scalable Vector Graphics (SVG) Font：基于SVG图形格式的字体，主要用于网页设计。SVG字体允许字体在不同大小下保持清晰度，但不被所有浏览器支持。

  8. Font Collection (COL)：字体集合文件，可以包含多种字体格式，方便用户管理和使用。

npm 镜像地址

https://npmmirror.com/package/font-spider

font-spider 是什么

font-spider 是一个用于优化网页字体使用的Node.js工具，它旨在解决网页字体文件过大导致的加载速度慢和资源浪费的问题。通过分析网页中实际使用的字符，font-spider 可以智能地裁剪字体文件，只保留网页中实际用到的字符，从而生成更小的字体文件。

font-spider 使用

npm install font-spider -g

创建一个文件夹 font-demo 这里文件夹命名随意，里边文件主要有，demo.html 和 Jingnan-wheat.otf 字体文件!

demo.html代码文件内容如下

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style type="text/css">
		@font-face{
			font-family: "Jingnan-wheat";
			src: url("Jingnan-wheat.otf");
		}
		*{
		   font-family: "Jingnan-wheat" !important;
		}
	</style>
	<title></title>
</head>
<body>
	<center><h2>字体压缩</h2></center>
	<div>Jingnan-wheat</div>
</body>
</html>

然后通过 font-spider 来进行字体格式压缩!

font-spider demo.html
➜  未命名文件夹 font-spider demo.html
Font family: Jingnan-wheat
Original size: 7979.78 KB
Include chars: !"()*-.:;@Jacefghilmnoprstuwy{}体压字缩
Chars length: 35
Font id: ced12d89cfa67d707eaa8c10ff1a7acc
CSS selectors: *
Font files:
File Jingnan-wheat.otf created: 7.08 KB

➜  未命名文件夹 ls
Jingnan-wheat.otf demo.html
➜  未命名文件夹

生成成功，由 8m -> 输出 -> 7.08kb , 之后就可以重新替换未压缩之前的字体文件了!