【微信小程序】使用自定义字体

微信小程序使用自定义字体

1. 微信小程序默认支持的字体

在小程序的.wxss 中对字体进行样式定义，如

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, ans-serif ;

显示效果如下图：

但是由于微信支持的字体非常有限，不能满足个性化的需求，因此在开发的过程中可能会需要使用自定义字体。

小程序提供了一个接口：wx.loadFontFace(Object object)

但是这里需要用到的是网络字体，且对字体链接有一定限制，因此还是希望能够寻求一个方法能够使用自己下载的字体。

2. 自定义字体获取

网上有很多字体资源，下载你喜欢的字体 ttf 文件即可。
如：第一PPT

我选择的是这个字体：

3. 文字提取和字体ttf文件压缩

由于微信小程序限制提交的程序包大小不能超过2M，而中文的字体ttf文件转Base64插入程序中，size 几乎都超出了范围，因此要对文字内容进行提取，去掉一些用不到的字。

具体步骤如下：

• 统计你的小程序中所有需要用到的文字；
• 使用 sfnttool 工具对上一个步骤中下载好的字体文件进行文字的提取，工具下载链接：sfnttool.zip
• 工具使用方法（已配java环境）：
  java -jar sfnttool.jar -s "这是要提取的文字" source.ttf target.ttf
• 参数说明：
  -s "这是要提取的文字"表示你用到的文字；
  source.ttf是准备好的源字体文件；
  target.ttf是生成字体文件。

完成文字提取后会发现 生成的 target.ttf 文件的size明显小了很多。

4. 字体转Base64格式

工具网站：https://transfonter.org/
具体步骤如下图：

解压下载的文件，其中生成的 style.css 文件如图所示：

其中 src - url 对应的就是字体编码。

5. 字体应用到小程序中

把上一步中生成的 style.css 文件里的内容整个copy到微信小程序的 .wxss 页面中。

【注意】

由于编码较长，为了不影响开发，建议将这段代码 copy 到.wxss 文件的最后。

然后在你需要使用这个字体的控件，如按钮button的样式上，进行如下配置配置：

button{
  font-family: 'IDChuXinShaoNvTiJ';
}

然后保存，就可以看到预览效果啦！

• 参考：
  • 【工具】在TTF字体中提取想要的文字，让字体文件变迷你
  • 中文字体其实也可以用在网页上的