背景
在一个项目中，一定要用到某种字体，但是这个字体下下来有10.55MB，这显然是不行的。
字体压缩的原理就是你要使用的字符单独拿出来，不用的就不包含，这样就可以使得字体文件更小。
一 ：字蛛是一个中文字体压缩器
字蛛传送门
先安装好 NodeJS，然后执行
npm install font-spider -g
新建文件夹：
index.css内容
/*声明 WebFont*/ @font-face { font-family: 'test'; src: url('./KaiGenGothicSC-Normal.ttf'); font-weight: normal; font-style: normal; } /*使用选择器指定字体*/ .test { font-family: 'test'; }
index.html内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" type="text/css" href="./index.css" /> </head> <body> <div class="test"> 日期 摄像头 </div> </body> </html>
执行命令：
font-spider index.html
限制
- 不支持 javascript 动态插入的元素与样式
- .otf 字体需要转换成 .ttf 格式才能被压缩（免费 ttf 字体资源）
- 仅支持
utf-8编码的 HTML 与 CSS 文件 - CSS
content仅支持content: 'prefix'和content: attr(value)这两种形式