MicroPython[ESP32-S3]：使用lv_font_conv制作中文字体文件然后加载和显示

Posted on by dsx2016

bilibili-视频演示

点击本文字，打开哔哩哔哩APP

NO.1
本期功能

以下内容

  1. 使用lv_font_conv制作中文字体文件（nodejs）

  2. micropython加载并显示手写中文字体

img

NO.2
lv_font_conv

安装lv_font_conv（前提是先安装nodejs和npm）

npm i lv_font_conv -g

img

验证是否安装成功

lv_font_conv

img

转化字体

lv_font_conv --size 20 --format bin --bpp 1 --font muyao.ttf --symbols 哔哩哔哩粉丝 --no-compress -o bilibili_fans.bin

img

img

NO.3
字体加载并显示

加载字体（定义字体样式名为font_demo）

font_demo=lv.font_load("S:./bilibili_fans.bin")

设置字体样式

label_font_demo.set_style_text_font(font_demo, 0)

修改之前的哔哩哔哩粉丝文案为中文

# 显示粉丝文案font_demo=lv.font_load("S:./bilibili_fans.bin")label_fans = lv.label(scr)label_fans.set_style_text_font(font_demo, 0) label_fans.set_text("哔哩哔哩粉丝")label_fans.set_x(120)label_fans.set_y(135)

并且微调粉丝数x坐标

# 显示粉丝数label_fans_num = lv.label(scr)label_fans_num.set_text("0")label_fans_num.set_x(250)label_fans_num.set_y(135)

显示效果

img

NO.4
Tips

到此为止，中文字体设置成功并显示

总结如下：

  1. 需要NodeJs和Npm为环境前提（本文忽略环境安装）

  2. 使用npm安装lv_font_conv用来制作中文字体

  3. 下载需要转换的中文字体文件（本文为沐瑶手写体的ttf文件）

  4. 指定需要转换的中文字符并使用命令行进行转换

  5. 把转换成功的bin文件传输到ESP32-S3中

  6. 使用lv.font_load和set_style_text_font进行字体的加载和显示

转换中文字体文件的方式不只有这一种，还可以直接加载ttf字体文件，下期有空再整理

往期内容
《MicroPython[ESP32-S3]：开启WIFI设置NTP时间同步并显示当前日期和周》

《MicroPython[ESP32-S3]：硬件定时器设置日期刷新文字显示》

《MicroPython[ESP32-S3]：LVGL显示GIF+http request显示哔哩哔哩粉丝计数》

END