评论

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

微信小程序添加自定义的(裁剪的)字库

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


准备工作:

网上下载字库

过程省略....


裁剪字库


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

最后一次编辑于  2019-12-27  
点赞 3
收藏
评论

1 个评论

  • 天天修改
    天天修改
    2019-12-26

    有点难搞啊,不过我需要等宽数字字体,学习了

    2019-12-26
    赞同
    回复 1
    • 汤姆熊
      汤姆熊
      2019-12-27
      不难,你可以用FontCrreator创建自己的字体库。或者用别人的改改
      2019-12-27
      回复
登录 后发表内容