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

发布于 6 年前作者 min943005 次浏览最后编辑 6 年前来自 share

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

准备工作:

网上下载字库

过程省略....


裁剪字库


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

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

WXOPEN Club 内容图片



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

裁剪字库

WXOPEN Club 内容图片

  1. 新建文件:File >> New

WXOPEN Club 内容图片

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

WXOPEN Club 内容图片

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

复制

WXOPEN Club 内容图片

拷贝

WXOPEN Club 内容图片

  1. 编辑单个字形的属性

WXOPEN Club 内容图片

  1. 设置字形编码值

WXOPEN Club 内容图片

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

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

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

WXOPEN Club 内容图片

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

WXOPEN Club 内容图片

导入到微信小程序目录中


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

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

WXOPEN Club 内容图片

WXOPEN Club 内容图片

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


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

WXOPEN Club 内容图片

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

WXOPEN Club 内容图片

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

WXOPEN Club 内容图片

吐槽下:微信社区发布文章的工具真不好用,格式排版不好弄。格式不好,请见谅!

参考文档:

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

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

1 回复
fanjuan
fanjuan1 楼4 年前

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