字体压缩

字体压缩

一. 在一个项目中,一定要用到华康娃娃体做一个效果,但是这个字体下下来有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)最后在本文件夹下打开命令行,输入指令:

font-spider index.html

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值