记录一次字体文件压缩功能

小心脏
697 阅读2分钟

为什么要压缩

今天在开发项目的时候，需要用到一些特殊的字体，当UI把字体文件发给我的时候，就发现这个字体文件特别大，顶的上好几张图片了。

由于项目开发时间紧张，就没多管直接拿来用了，结果还真出问题了。

因为字体文件太大，下载他需要一定的时间，在这段时间里文字没有显示出来，刚好这段文字需要做一个动画，等文字出现的时候动画已经进行了一会，感觉就会非常奇怪。

我问了问UI能不能把字体文件压缩一下，结果UI也不清楚，这时候另一个小伙伴告诉我可以把这个字体文件里提取出只有自己想要的文字，这样空间就小很多了。

仔细想想也是，好几M的文件只是为了展示几个字，确实太浪费了，所以后来就发现了一个压缩字体文件的插件font-spider。

font-spider

font-spider可以通过npm下载，他的作用就是把字体文件提取出只有自己需要的文字，并且操作也非常简单。

  • 首先全局安装font-spider，执行命令npm i font-spider -g

  • 安装完成后输入font-spider -V（注意是大写的V）如果能跳出版本号就证明安装成功了

  • image.png

  • 安装完成后随便找个地方新建一个目录，格式如下：

  • image.png

  • 先按常规操作吧字体文件导入

    • css文件
      @font-face {
    font-family: 'zyyy';
    src: url('../font/zyyy.ttf');
  }
    • html文件
      <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="./css/index.css">
  </head>
  <body>
    <div style="font-family: 'zyyy'">
      一段自己需要的文字
    </div>
  </body>
  </html>
    • 展示效果

image.png

  • 就这么9个字，字体文件大小有6m，还不如直接放图片呢！🤦‍♂️我们现在用font-spider压缩一下，非常简单，在当前文件目录下输入命令font-spider *.html image.png
  • 在命令行里就可以得到信息，原文件大小是6M，使用了9个字，压缩以后大小为11k！这确实是小了不少的，如果这时候我们在输入其他的字就会变成下图的效果
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="./css/index.css">
</head>
<body>
  <div style="font-family: 'zyyy'">
    一段自己需要的文字
    卑微打工仔
  </div>
</body>
</html>

image.png

  • 卑微打工仔不配拥有华丽的样式🤷‍♂️。
  • 这时候我们看到文件目录发生了改变，原文件已经到.font-spider文件夹中了，我们需要的文件在原来的位置

image.png

  • 唯一比较麻烦的是如果文字需要修改，那么得重新执行一次这个操作了，所以原文件也得先留好呀。

最后，如果这篇文章对你有帮助的话喜欢大家可以帮忙点个赞，或者评论一下，谢谢啦🙏

avatar
文章
阅读
粉丝