字体按需压缩到最小

字体压缩

一. 在一个项目中，一定要用到华康娃娃体做一个效果，但是这个字体下下来有2.55MB，这显然是不行的，于是上网找了一波干货，如下：

字体压缩的原理就是你要使用的字符单独拿出来，不用的就不包含，这样就可以使得字体文件更小

方法一： 字体按需压缩网站

先来看看这个网站的使用，有一个框，里面说只支持zip压缩格式。其实只要一个你的字体文件，再加上一个html文件，两个通过zip格式压缩，然后拖拽到框里面，然后网站会自动压缩。最后你只要下载下来就行了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
  @font-face {
    font-family: "lala";
    src: url("hkwwt.ttf");
  }
  .a {
    font-family: "lala";
  }
</style>

<body>
  <div class="a">0123456789.</div>
</body>

</html>

注意上面的div标签，里面放上你会用到的文字，然后保存 ——>压缩——>拖拽到网站；就行了，因为我只用到数字，所以就只写数字加标点

方法二： 用字蛛

1)首先在电脑上全局安装 font-spider

​ npm install font-spider -g (前提是是安装了nodejs)

2)新建一个文件夹，把名为华康娃娃体W5的字体文件放里面，

3)新建一个html,我的叫index.html：在里面输入：div里面放的就是你要使用的文字

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
  @font-face {
    font-family: "lala";
    src: url("华康娃娃体W5.ttf");
  }
  .a {
    font-family: "lala";
  }
</style>

<body>
  <div class="a">0123456789.</div>
</body>

</html>

4)最后在本文件夹下打开命令行，输入指令：

1
font-spider index.html

在本文件夹下面，原来的字体文件就被压缩了，还会新出现一个文件夹.font-spider里面存放的就是你原来的字体文件