微信小程序自定义(裁剪)“小字库”制作与使用
发布于 5 年前 作者 min94 2525 次浏览 来自 分享

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

准备工作:

网上下载字库

过程省略....


裁剪字库


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

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



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

裁剪字库

  1. 新建文件:File >> New

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

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

复制

拷贝

  1. 编辑单个字形的属性

  1. 设置字形编码值

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

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

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

  1. 将生成的字库转换成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

1 回复

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

回到顶部