ESP32 开发笔记(四）littleVGL LVGL学习使用lv_font_conv离线工具 Font字体 FontAwesome图标字体的使用

比眉伴天荒 2022-10-27 15:58 1088阅读 0赞

# 前言 #

先看效果，段式数码字体没选择好^\_^。屏幕上这些全是字体，包括图标

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70][]

在LVGL项目开发中经常会用到各种各样的字体显示包含简单的图标显示，此文就教大家怎么使用LVGL官方的字体转换工具来将电脑中的ttf/woff/woff2字体转换为C数组文件供LVGL调用显示，此文 只讲 lv\_font\_conv工具的离线使用方法，想在线转换的直接访问LVGL官方中的转换工具来在线转换。地址：[https://lvgl.io/tools/fontconverter][https_lvgl.io_tools_fontconverter]

lv\_font\_conv是LVGL官方编写的一套离线字体转换工具，由于此工具是由node.js 写的，所以要在第一步安装node运行环境  
离线工具没有图形化界面，需要使用命令行输入命令来转换，要比在线复杂点，优点就是无需网络，而且速度非常快。

# 一、安装node #

官方网址：[https://nodejs.org/zh-cn/][https_nodejs.org_zh-cn]  
我的系统是Windows10\_64，下载的最新版本，如果你的电脑是Window7使用如下地址下载12及以前版本  
全版本下载地址：[https://nodejs.org/en/download/releases/][https_nodejs.org_en_download_releases]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 1][]

选择长期支持版，下载后打开安装  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 2][]  
单击下一步  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 3][]  
勾选同意协议，单击下一步  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 4][]  
选择安装位置，单击下一步  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 5][]  
选择安装组件，默认即可，单击下一步  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 6][]  
勾选自动安装需要的工具，因为有些模块编译需要用到python或vc构建工具，如果你的电脑已经有安装这些不用勾选，单击下一步  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 7][]  
单击安装按钮，开始安装  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 8][]  
接下来验证安装，安装程序会自动将环境变量设置好，打开cmd输入node --version命令查看版本号，能正常输出版本号即为安装成功  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 9][]

# 二、下载lv\_font\_conv #

github地址：[https://github.com/lvgl/lv\_font\_conv][https_github.com_lvgl_lv_font_conv]  
网络好的同学可以试试LVGL官方的在线转换工具^\_^，网址: [https://lvgl.io/tools/fontconverter][https_lvgl.io_tools_fontconverter]（有同学反应此国外网站打不开，所以这里只教离线工具的使用）  
打开 git cmd命令行工具，输入命令：git clone https://github.com/lvgl/lv\_font\_conv.git，将字体转换工具下载到本地（大概2M多）  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 10][]  
关闭git cmd窗口，打开Windows cmd命令行工具cd到字体转换工具目录  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 11][]  
接下来使用Node工具安装字体转换工具所有依赖项，输入命令npm install回车，开始安装（此步必须联网）  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 12][]  
安装完成，发现原来这个文件夹只有2M，现在变为106M多，（需要在其它电脑上离线使用的话，将这个文件夹压缩备份，在没有网络的情况下只要有node安装程序和这个压缩包即可离线实现字体转换）接下来将字体转换工具模块使用node全局安装，这样在哪个目录也可以使用这个工具了  
命令行输入命令：npm install -g F:\\ESP32\\LVGL\\lv\_font\_conv  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 13][]  
安装完成，此步不需要联网  
接下来验证一下lv\_font\_conv工具是否安装成功，打开一个新的Windows cmd命令行工具，输入命令：lv\_font\_conv -h。这个命令将列出lv\_font\_conv所有的使用参数和方法  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 14][]

# 三、lv\_font\_conv 工具工具命令详解 #

lv\_font\_conv命令的参数(注意：命令中可以使用中文，但输入空格时必须要切换到英文输入法，不能有中文空格)  
    **--bpp**: 抗锯齿大小,可选值为 1、2、3、4、8  
    **--size**: 字体的大小,实际就是指字符的高度  
    **-o**(或者--output): 输出路径,比如为C:\\Users\\Administrator\\Desktop\\my\_font\_heiti\_30.c  
    **--format**: 输出格式,可选值有 dump,bin,lvgl,我们只用 lvgl 就行了  
    **--font**: ttf/woff/woff2 字体文件的路径  
    **-r**(或--range): 所需字符的 unicode 编码范围,可选值为单个字符,字符范围,加可选的映射地址,首先你得必须保证你所需要的字符范围在--font 指定的字体文件中能找得到,-r 命令行参数可以在一条命令中多次出现,如下面例子所示:  
        -r 0xF450 单个字符,十六进制和十进制都行  
        -r 0xF450-0xF470 字符范围  
        -r '0xF450=>0x81' 单个字符加映射地址  
        -r '0xF450-0xF470=>0x81' 字符范围加映射地址  
        -r 0xF450 -r 0xF451-0xF470 一下使用 2 次-r 命令行参数  
        -r 0xF450,0xF451-0xF470 用单个-r 表示多种可选值  
    **--symbols**: 和-r 的作用差不多,都是用来指示所要用到的字符,不过他们的表达形式不一样,对--symbols 而言,它是接受字符的字面量形式,而-r 是接受字符的编码形式,--symbols 和-r 可以同时使用,也可以只使用它们其中的一个,请看如下例子:  --symbols 0123456789 中 ABCD 国 EFG  
    **--no-compress**: 禁止进行 RLE 压缩,我们在生成字体时,请禁止进行压缩

以上列出的都是比较常用的命令行参数，还有其它参数如：**--autohint-off, --autohint-strong,--force-fast-kern-format, --no-prefilter, --no-kerning, --full-info**  
这些参数都是不太重要的，[https://github.com/lvgl/lv\_font\_conv][https_github.com_lvgl_lv_font_conv]网站有详细介绍

命令举例：  
lv\_font\_conv --no-compress --format lvgl --font D:\\123\\经典黑体简.TTF -o D:\\123\\myfont.c --bpp 4 --size 30 --symbols 唯心所现唯识所变 -r 0x20-0x7F  
命令解释：  
\--no-compress：                     不压缩  
\--format lvgl：                         输出格式LVGL  
\--font D:\\123\\经典黑体简.TTF                要转换在字体文件目录  
\-o D:\\123\\myfont.c                  输出文件的路径及文件名  
\--bpp 4                                    抗锯齿大小设置为4  
\--size 30                                 输出字体为30像素高  
\--symbols 唯心所现唯识所变  要转换的字符“唯心所现唯识所变”  
\-r 0x20-0x7F                          编码范围，玩过单片机液晶显示的应该眼熟，看下表  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 15][]

命令的参数是可以组合的，再来个复杂的命令  
lv\_font\_conv --no-compress --format lvgl --font D:\\123\\经典黑体简.TTF -o D:\\123\\myfont.c --bpp 4 --size 25 --symbols 路过人 -r 0x30-0x39 -r 0x41-0x5A -r 0x61-0x7A -r 0x95F4  
命令解释：  
\--no-compress：                     不压缩  
\--format lvgl：                         输出格式LVGL  
\--font D:\\123\\经典黑体简.TTF                要转换在字体文件目录  
\-o D:\\123\\myfont.c                  输出文件的路径及文件名  
\--bpp 4                                    抗锯齿大小设置为4  
\--size 25                                 输出字体为25像素高  
\--symbols 路过人                   要转换的汉字字符“路过人”  
\-r 0x30-0x39                         要转换的字符0-9  
\-r 0x41-0x5A                         要转换的字符大写A-Z  
\-r 0x61-0x7A                         要转换的字符小写a-z  
\-r 0x95F4                              要转换的汉字字符“间”的unicode码16进制

# 四、使用lv\_font\_conv工具转换普通字体 #

经过第三章后大家应该都懂得怎么使用lv\_font\_conv命令了，接下实际转换两组字体，一组中文加英文，一组液晶段式数字，一会儿下载测试  
生成黑体字，英文数字字母+路过人间四个汉字    myfont.c  
lv\_font\_conv --no-compress --format lvgl --font D:\\123\\经典黑体简.TTF -o D:\\123\\myfont.c --bpp 4 --size 25 --symbols 路过人间 -r 0x20-0x7F  
生成液晶段试 数字0-9     myledfont.c  
lv\_font\_conv --no-compress --format lvgl --font D:\\123\\led16sgmnt-Regular.ttf -o D:\\123\\myledfont.c --bpp 4 --size 25 -r 0x30-0x39

# 五、使用lv\_font\_conv工具转换图标字体（FontAwesome） #

接下来教大家怎么生成图标字体，其实LVGL工程中已经给我们集成了很多图标字体，下载过官方示例的同学应该在LCD界面中有看到，WIFI，蓝牙，保存，复制，等等图标。那如果项目中需要用到其它没有的图标怎么办呢。这里就要用到阿里的产品了。一个免费的图标字体平台

iconfont  
阿里巴巴阿里妈妈MUX倾力打造的矢量图标管理、交流平台，设计师将图标上传到 iconfont 平台，用户可以自定义下载多种格式的icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用

官方网址：[https://www.iconfont.cn/][https_www.iconfont.cn]

登录官网，没有账号的同学先在官网注册登录一下，目前只能以下方式登录  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 16][]

登录后先创建一个项目  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 17][]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 18][]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 19][]  
接下来点主页，搜索需要的图标，例如天气在想要的图标上单击购物车图标先添加到购物车  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 20][]  
然后单击右上角的购物车图标  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 21][]  
选择添加到项目  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 22][]  
添加到刚才创建 的项目，单击确认按钮  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 23][]

然后单击主页上的菜单资源管理->我的项目，你刚才选择的图标会在这个项目下，单击下载到本地  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 24][]  
会弹出下载窗口  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 25][]  
解压下载好的压缩包，里面有很多文件，我们其实只用到其中的iconfont.ttf字体文件，将iconfont.ttf解压到转换文件夹，我是放在D盘的123文件夹，你们随意  
使用lv\_font\_conv命令生成my\_icon\_font30.c文件，我这里只转换了前五个图标，生成的my\_icon\_font30.c文件备用  
lv\_font\_conv --no-compress --format lvgl --font D:\\123\\iconfont.ttf -o D:\\123\\my\_icon\_font30.c --bpp 4 --size 30 -r 0xe780,0xe61e,0xe622,0xe623,0xe624  
这里注意-r参数，你的图标项目中，每一个图标下面都有一个图标对应的unicode编码，上面的-r参数就是图标对应的unicode编码，几个图标对应几个编码逗号隔开  
![20210205175020658.png][]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 26][]

# 六、使用lv\_font\_conv工具转换普通字体与图标字体合并 #

上面两章教大家怎么将字体文件生成c代码文件，一个字体生成了一个点c文件，这样的话在源码工程中用到几种字体就会有几个C文件，调用也很不方便，接下来教大家一条指令将项目中所用到的N种字体+图标字体合并转换为一个点c文件。  
使用组合命令：

lv\_font\_conv --no-compress --format lvgl --font D:\\123\\经典黑体简.ttf --symbols 路过人间 --font D:\\123\\led16sgmnt-Regular.ttf -r 0x30-0x39 --font D:\\123\\iconfont.ttf -r 0xe780,0xe61e,0xe622,0xe623,0xe624 -o D:\\123\\my\_merge\_font\_30.c --bpp 4 --size 30

命令解释：  
经典黑体简：汉字‘路过人间’  
液晶段式字体：0-9数字  
天气图标字体：5个图标  
以上三种字体合并转换为一个my\_merge\_font\_30.c的文件

# 七、编辑代码 #

经过四五六章得到四个字体的点C文件，下面开始编写代码，调用这四个字体文件  
myfont.c  
myledfont.c  
my\_icon\_font25.c  
my\_merge\_font\_25.c

将这四个文件放入工程目录LVGL\_Font\_Test\\components\\lvgl\\lvgl\\src\\lv\_font文件夹下  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 27][]  
打开此工程，在main.c中添加字体声明

LV_FONT_DECLARE(my_icon_font30);//申明字体		图标字体
    LV_FONT_DECLARE(myfont);//申明字体				汉字英文
    LV_FONT_DECLARE(myledfont);//申明字体			LCD段式字体
    LV_FONT_DECLARE(my_merge_font_30);//申明字体    以上合并字体

将图标字体的unicode码转换为UTF8编码并声明，这里要用到一个小工具，我用VC写的《Unicode编码转utf-8编码.exe》可以批量转换Unicode编码到utf8，直接转换成类似这种格式“"\\xEE\\x9E\\x80"，复制到代码中直接使用，看软件截图，界面有点糙，后面再改进吧，可以一次输入N个Unicode编码，用逗号隔开即可  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 28][]

//定义图标字体1
    #define MY_ICON_FONT1 "\xEE\x9E\x80"	// 0xe780
    //定义图标字体2
    #define MY_ICON_FONT2 "\xEE\x98\x9E"	// 0xe61e
    //定义图标字体3
    #define MY_ICON_FONT3 "\xEE\x98\xA2"	// 0xe622
    //定义图标字体4
    #define MY_ICON_FONT4 "\xEE\x98\xA3"	// 0xe623 
    //定义图标字体5
    #define MY_ICON_FONT5 "\xEE\x98\xA4"	// 0xe624

创建4个风格并设置四种字体，一会儿应用到Label标签上

///
    	///创建四个风格来调用不同字体
    	///
    	static lv_style_t label_shadow_style1;											// 创建一个风格
    	lv_style_init(&label_shadow_style1);											// 初始化风格
    	lv_style_set_text_font(&label_shadow_style1, LV_STATE_DEFAULT, &my_icon_font30);
    
    	static lv_style_t label_shadow_style2;											// 创建一个风格
    	lv_style_init(&label_shadow_style2);											// 初始化风格
    	lv_style_set_text_font(&label_shadow_style2, LV_STATE_DEFAULT, &myfont);
    
    	static lv_style_t label_shadow_style3;											// 创建一个风格
    	lv_style_init(&label_shadow_style3);											// 初始化风格
    	lv_style_set_text_font(&label_shadow_style3, LV_STATE_DEFAULT, &myledfont);
    
    	static lv_style_t label_shadow_style4;											// 创建一个风格
    	lv_style_init(&label_shadow_style4);											// 初始化风格
    	lv_style_set_text_font(&label_shadow_style4, LV_STATE_DEFAULT, &my_merge_font_30);

创建四个标签并设置字符内容来演示字体的使用

图标字体Lable，五个图标

///
    	///Label1 /
    	///	
    	lv_obj_t * label1 = lv_label_create(lv_scr_act(), NULL);	// 在主屏幕创建一个标签
    	lv_label_set_long_mode(label1, LV_LABEL_LONG_BREAK);		// 标签长内容框，保持控件宽度，内容过长就换行
    	lv_label_set_recolor(label1, true);							// 使能字符命令重新对字符上色
    	lv_label_set_align(label1, LV_LABEL_ALIGN_CENTER);			// 内容居中对齐
    	lv_label_set_text(label1, "#ff9900 "MY_ICON_FONT1"#" "#33ccff "MY_ICON_FONT2"#" "#ff3333 "MY_ICON_FONT3"#" "#9933cc "MY_ICON_FONT4"#" "#00ff00 "MY_ICON_FONT5"#");
    	lv_obj_set_width(label1, 320);								// 设置标签宽度
    	lv_obj_align(label1, NULL, LV_ALIGN_CENTER, 0, -80);		// 对齐到中心偏上
    	lv_obj_add_style(label1, LV_LABEL_PART_MAIN, &label_shadow_style1);		// 应用效果风格

汉字字体Lable

///
    	///Label2 /
    	///
    	lv_obj_t * label2 = lv_label_create(lv_scr_act(), NULL);	// 在主屏幕创建一个标签
    	lv_label_set_long_mode(label2, LV_LABEL_LONG_BREAK);		// 标签长内容框，保持控件宽度，内容过长就换行
    	lv_obj_set_width(label2, 320);								// 设置标签宽度
    	lv_label_set_recolor(label2, true);							// 使能字符命令重新对字符上色
    	lv_label_set_text(label2, "路过人间HelloBug12345");// 设置显示文本
    	lv_obj_align(label2, NULL, LV_ALIGN_CENTER, 0, -40);			// 对齐到中心偏下
    	lv_obj_add_style(label2, LV_LABEL_PART_MAIN, &label_shadow_style2);		// 应用效果风格

段式数码字体Lable，0-9

///
    	///Label3 /
    	///
    	lv_obj_t * Label3 = lv_label_create(lv_scr_act(), NULL);	// 在主屏幕创建一个标签
    	lv_label_set_long_mode(Label3, LV_LABEL_LONG_BREAK);		// 标签长内容框，保持控件宽度，内容过长就换行
    	lv_obj_set_width(Label3, 320);								// 设置标签宽度
    	lv_label_set_recolor(Label3, true);							// 使能字符命令重新对字符上色
    	lv_label_set_text(Label3, "0123456789");					// 设置显示文本
    	lv_obj_align(Label3, NULL, LV_ALIGN_CENTER, 0, 10);			// 对齐到中心偏下
    	lv_obj_add_style(Label3, LV_LABEL_PART_MAIN, &label_shadow_style3);		// 应用效果风格

合并字体Lable演示

///
    	///Label4 /
    	///
    	lv_obj_t * Label4 = lv_label_create(lv_scr_act(), NULL);	// 在主屏幕创建一个标签
    	lv_label_set_long_mode(Label4, LV_LABEL_LONG_BREAK);		// 标签长内容框，保持控件宽度，内容过长就换行
    	lv_obj_set_width(Label4, 320);								// 设置标签宽度
    	lv_label_set_recolor(Label4, true);							// 使能字符命令重新对字符上色
    	lv_label_set_text(Label4, "路过人间123"MY_ICON_FONT1 MY_ICON_FONT2);// 设置显示文本
    	lv_obj_align(Label4, NULL, LV_ALIGN_CENTER, 0, 60);			// 对齐到中心偏下
    	lv_obj_add_style(Label4, LV_LABEL_PART_MAIN, &label_shadow_style4);		// 应用效果风格

# 八、编译下载验证验证 #

开发板接入电脑下载固件，效果如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70]: /images/20221024/0ebc5f81854e4113937088fca2f844ce.png
[https_lvgl.io_tools_fontconverter]: https://lvgl.io/tools/fontconverter
[https_nodejs.org_zh-cn]: https://nodejs.org/zh-cn/
[https_nodejs.org_en_download_releases]: https://nodejs.org/en/download/releases/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 1]: /images/20221024/5766db183c2a4365a3ebdb306388befa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 2]: /images/20221024/64fd8e6e625c47f8bf4a111e6ed89d75.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 3]: /images/20221024/70411389ab1d4f2bacaceab8c6a55bff.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 4]: /images/20221024/16425a92ff364da198bbd312fc1ab291.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 5]: /images/20221024/e60f2f56954a41119f1445e9625c9ae8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 6]: /images/20221024/05e4c3ba9da44daebc1c391021b39081.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 7]: /images/20221024/37ff5a8f27184d44841f72c54741eec7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 8]: /images/20221024/e6786dc29a614f31a9e0a175c5ac3648.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 9]: /images/20221024/f0da0b68501742a1bc527b6733194883.png
[https_github.com_lvgl_lv_font_conv]: https://github.com/lvgl/lv_font_conv
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 10]: /images/20221024/fb587660e89746a7a23b2cb0d0f8a6c6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 11]: /images/20221024/b35d732a4e564b0ba3d20c467b50803d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 12]: /images/20221024/ec17e11ac80f458a9235059dbb08b75c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 13]: /images/20221024/313c12bdfc2e434c84ae8410f1488dc9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 14]: /images/20221024/a1272bf760f34871879c3879d77040dd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 15]: /images/20221024/f20ce9041bce44b5a84279664f468557.png
[https_www.iconfont.cn]: https://www.iconfont.cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 16]: /images/20221024/e2427bd7dda645e890f897db8beda676.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 17]: /images/20221024/d744dfb8edc04c1cbf3fbe3a296a035a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 18]: /images/20221024/3991eccb347f4c149f56cdfa12665f36.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 19]: /images/20221024/c439a665bc064b6ba722164a1e77be3e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 20]: /images/20221024/23795f7d876149a582731d379c1c38b9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 21]: /images/20221024/191ae08df4944287a1fd4ae4bb3e5060.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 22]: /images/20221024/b005faac3d734336a2be70f295048aa1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 23]: /images/20221024/9131b45051514b88bf4cb0fc260a3c7d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 24]: /images/20221024/9ae0149ded5440089003a31eeb059aa7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 25]: /images/20221024/497561a7c6034c55a0cc8f091e71da38.png
[20210205175020658.png]: /images/20221024/0a31d342e1384989877aa712f5f24c22.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 26]: /images/20221024/33b06fa4de7c43da9cb3b02167b94f62.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 27]: /images/20221024/bf4afb403b3f489a9145642def46b17c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 28]: /images/20221024/b2400da832344a578c2e5430c418922a.png