背景：开发小程序过程中，需要自定义字体，但字体包体积过大，需要删减不需要的部分。
方法一：用官方方法，通过wx.loadFontFace去加载网络字体
缺点：需要https且同域，不支持加载本地字体。
本质：是将字体放在服务器，下载到本地加载，不能解决字体包大的问题，不推荐。
loadFontFace方法链接
wx.loadFontFace({
family: 'Bitstream Vera Serif Bold',
source: 'url("https://sungd.github.io/Pacifico.ttf")',
success: console.log
})
方法二：用字蛛插件font-spider，抽取指定中文字符串ttf文件
介绍：
font-spider可以针对网页内使用文字，对字体包进行裁剪。
思路：
可以本地建立一个网页，将用到的字写入html文件，字体ttf文件放入css文件夹目录。
一：安装nodejs运行环境，下载安装font-spider
npm install font-spider -g
二：使用方法
- 需要3个文件index.html 、font.css、xxx.ttf，文件目录如下
.
├── css
│ ├── HappyZcool-2016.ttf
│ └── font.css
└── index.html
一级目录是index.html和css文件夹，二级目录是在css文件夹下有HappyZcool-2016.ttf和font.css。
font.css
@font-face {
font-family: 'HappyZcool-2016'; //HappyZcool-2016 是字体名字
src: url('HappyZcool-2016.ttf') format('truetype');//url内写字体包文件名，format是对应格式
}
#txt{
font-family: 'HappyZcool-2016';//设置网页文本字体
}
HappyZcool-2016.ttf 我这里使用的是站酷快乐体
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./css/font.css">
</head>
<body>
<div id="txt">
我是李大赖没事就喜欢蛤噶哈
</div>
</body>
</html>
三：终端输入指令，裁剪字体
font-spider index.html
裁剪的字体在目录css/HappyZcool-2016.ttf下，对面之前，从1.6M缩减到了4K，如果是客户端这时候就可以直接拿来用了。
如果是小程序，想要本地加载这个字体就需要下边的操作
四：使用transfonter将字体进行base64解码，获取源码
-
将
css文件夹下的HappyZcool-2016.ttf文件，上传到transfonter，解码后下载，如下图
transfonter解码 -
下载后，目录如下图
解码后目录
打开stylesheet.css文件，在内部增加如下代码
.happy{
font-family: "HappyZcool-2016";
font-size: 16rpx;
font-weight: 19rpx;
}
完成后的文件，如下图
image.png
- 将
stylesheet.css改名为styleFont.wxss，添加至小程序目录内style目录内
目录结构
- 使用的时候，在相关页面的wxss内引入头文件既可。
我这里在tabbar内使用的，就在/custom-tab-bar/index.wxss文件内写
导入字体样式
同时在/custom-tab-bar/index.wxml内，需要用到的类对应happy既可，如下
<view class="happy">我是李大赖</view>
引用自定义字体
运行小程序，效果如下：
效果图
