微信小程序自定义(裁剪)“小字库”制作与使用

注意：此方法适合制作小点的字库，因为手动制作过程有点繁琐

准备工作：

• 下载FontCreator工具--->链接：https://pan.baidu.com/s/1sEb16MCoekGnBhnLoWEzMQ 提取码：jt7z 
• 字库格式转换网站：https://transfonter.org/
• 激活FontCreator自行百度()

网上下载字库

过程省略....

 

裁剪字库

 

1. 使用FontCreator工具裁剪(或者自定义)字库

2. 先通过https://transfonter.org/网站转换成ttf格式的字库格式。

 

3. 打开FontCreator软件，点击File >> Open选择刚才转换的simsun.ttf文件，然后打开它

裁剪字库

4. 新建文件：File >> New

5. 点击工具栏中“插入新字形”

 

6. 从打开的宋体字库中复制一个字形到刚才新建的文件的“新字形”处：

复制

拷贝

 

7. 编辑单个字形的属性

8. 设置字形编码值

9. 根据字形表示的字符来设置，这里我选择的是大写，这个根据你要设置的字符来自行设置

10. 重复以上步骤完成所有字形的编码值设置。最后在最前面设置一个空字形(据说是防止字库不被识别)

 

11. 保存裁剪后的字库，并导出为ttf格式。

 

 

12. 将生成的字库转换成base64格式

导入到微信小程序目录中

 

1. 解压将刚才转换成base64的压缩包。

2. 在微信小程序目录中新建一个style目录，并在style文件夹下新建一个wxss文件，并将转换成base64的压缩包中的wxss文件中的内容全部复制到新建的wxss文件中

注意：新建的wxss文件中的css代码中font-family的值，这个后面其他wxss文件中设置字体时需要用到。这里的是“simsun”

 

3. 在需要使用字体的wxss文件的开头通过import语法来导入字库。然后就可以在wxss文件中使用了。注意路径

使用自定义的字库，注意名称。

4. 编译小程序，即可查到效果

 

 

参考文档：

https://blog.csdn.net/xiaohui_brook/article/details/51909612

https://blog.csdn.net/qq_24985715/article/details/80857733