字体压缩

最新推荐文章于 2025-09-17 12:54:55 发布

原创最新推荐文章于 2025-09-17 12:54:55 发布 · 3.6k 阅读

1 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

14 篇文章

订阅专栏

字体压缩

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

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

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

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

<!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里面放的就是你要使用的文字

<!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)最后在本文件夹下打开命令行，输入指令：