2021-10-15

前言

本文章只为记录lvgl字体及图标方面的学习，包括自定义图标、自定义字体。

---

一、LVGL的字体

lvgl的字体设置各个版本基本相同，版本间的架构不同并不影响字体设置，lvgl允许开发人员自由定义字体，大家可根据自己的需求配置。

通常字体应用于label上，给其他控件添加文字说明，由于lvgl自带的font只能显示英文数字及常见字符，并不包括中文及其他语言，如日文、韩文。如果项目上有多国语言的要求，那么lvgl的font就不能提供支持了，这也是为什么需要学习自定义字体的需求所在。

一些标题栏或者是小型图标可用lvgl的图标，当然官方文件支持的图标并不是很多，只提供常用的图标，可在lv_symbol.h中查看，之后我们添加自定义图标也需在此文件中添加相关宏定义。

二、自定义字体步骤

1.宏定义

自定义字体，我们首先要要了解的是，lvgl的字体定义需要在E:\gitsource\lv_sim_visual_studio-7.11.0\LVGL.Simulator\lvgl\src\lv_font\lv_font.h和E:\gitsource\lv_sim_visual_studio-7.11.0\LVGL.Simulator\lv_conf.h文件中进行相关的宏定义设置，这样才能在样式中使用定义的字体。（文件夹根据个人下载文件配置，我所使用的是v7.11版本的VS019模拟器版本）

2.需要的字体

需要的字体可以个人在网络下载，或者从当前电脑C:\Windows\Fonts中选择合适的字体，例如宋体，黑体，微软雅黑，还有ios的冬青体。

复制下来的字体可使用LvglFontTool软件进行c文件的转换。在lvgl中字体是以c文件存放在工程当中的。软件获取地址，可从此网站下载学习LvglFontTool0.4：http://www.armbbs.cn/forum.php?mod=viewthread&tid=99387。

软件界面如下：

1. 首先选择字体导入复制好的文件ttf文件（ttc文件也可），可通过预览窗口查看字体效果；

选择合适的字形大小，该值的大下在label中为显示字体的大小，一般为12px至18px，有大字形要求的可各自选择；

2. 点击“加入常用汉字”，软件会将常见汉字导入，或者点击“导入txt文本”，是同样的效果。若有生僻字需求，请点击“加入所有汉字”。
   输入字体名称，字体名称为求方便理解，可将字形高度加上；包含头文件一般是需要的，可查看lvgl其他字体.h文件。之后点击开始转换即可生成字体的c文件，将之复制包含在lv_font文件夹下即可。
3. 在lv_font.h文件中需要添加一个宏定义，例如：

/*Declare the custom (user defined) fonts*/
#if LV_FONT_MYFONT_16
LV_FONT_DECLARE(myfont_16)
#endif
#if LV_FONT_MYFONT_18
LV_FONT_DECLARE(myfont_18)
#endif
#if LV_FONT_MYFONT_50
LV_FONT_DECLARE(myfont_50)
#endif

这是为了能让我们添加的字体生效。仿照其他字体，我们需要在lv_conf.h添加一个宏定义并打开它，这样基本就能使用了。

#define LV_FONT_MYFONT_16 1
#define LV_FONT_MYFONT_18 1
#define LV_FONT_MYFONT_50 1

我们可以写一个label并添加样式测试字体，如果有中文字体显示不出来的情况可尝试添加#pragma execution_character_set(“utf-8”)在代码段中，相关内容请自行查阅，lvgl官方文档有提示。

/*天气*/
    lv_obj_t* img_weather = lv_img_create(parent, NULL);
    lv_obj_set_size(img_weather, 50, 50);
    lv_img_set_src(img_weather, &weather_img);//导入资源
    lv_obj_align(img_weather, time, LV_ALIGN_IN_TOP_RIGHT, -35, 20);//左上角对齐
    /*温度标签*/
    static lv_style_t label_temperture_style;
    lv_style_init(&label_temperture_style);
    lv_style_set_text_font(&label_temperture_style, LV_STATE_DEFAULT, &myfont_16);//宋体16px字体

    lv_obj_t* label_temperature = lv_label_create(parent, NULL);
    lv_label_set_align(label_temperature, LV_LABEL_ALIGN_CENTER);//居中对齐
    lv_obj_add_style(label_temperature, LV_LABEL_PART_MAIN, &label_temperture_style);//添加文本样式
    lv_obj_align(label_temperature, img_weather, LV_ALIGN_OUT_BOTTOM_MID, -10, 1);//居中对齐
    lv_label_set_text(label_temperature, "26℃ 多云");//设置文本

效果如下图所示：

4. 关于多国语言的显示，可查看此链接学习，日韩文可显示，泰文由于文字组合方式较难显示，请自行摸索。
   相关可参考这篇文章：
   https://blog.csdn.net/tianjianwudiwowudi/article/details/108636146

三、添加自定义图标

LVGL自带了20几个symbol，在实际的使用过程中，可能不能满足项目的使用，需要自己添加一些symbol。
lvgl自带的symbol：

1. 要添加一个symbol，我们首先需要找到对应的图标，fontawesome提供了多达上千种。
   官方网站：https://fontawesome.com/
   

要添加一个symbol，首先需要找到这个symbol的unicode码，之后unicode要转成UTF-8编码格式，使之能够在label的textarea内使用。
选择要使用的图标，进入图标详情页https://fontawesome.com/v5.15/icons/map-marker-alt?style=solid，找到unicode码，将其复制。
此GPS图标的unicode码为f3c5。

2. 接着需要生成字库，将图标嵌入字库方便使用，LvglFontTool0.4也有自己的图标，方便使用，只需生成字库时插入图标即可。

也可以使用官方工具 https://lvgl.io/tools/fontconverter生成字体和图标，官方也有离线的软件可自行下载。
若只生成图标可点击网页下方链接下载官方字库FontAwesome5-Solid+Brands+Regular.woff，若还要文字，请自行添加字库。
这是使用官方的woff文件，可替换成自己的字库，range内是unicode码转化成十进制数。可使用电脑计算器转化。点击convert即可生成带图标信息的字库c文件。

3. 定义图标
   类似于上面的字体定义，将lv_font.h和lv_conf.h相关宏定义打开，在lv_symbol.h文件中定义我们的图标信息，就能在label中使用。

lv_font.h

#if LV_FONT_MYFONT_GPS
LV_FONT_DECLARE(my_font_gps)
#endif

lv_conf.h

#define LV_FONT_MYFONT_GPS 1

例程如下：

static lv_style_t label_style; lv_style_init(&label_style);
lv_style_set_text_font(&label_style, LV_STATE_DEFAULT, &my_font_gps);//宋体16px字体带图标

lv_obj_t* cont = lv_cont_create(parent, NULL);//创建容器
lv_obj_set_size(cont, LV_HOR_RES_MAX, TITLE_SIZE);//设置大小  
lv_obj_add_style(cont, LV_PAGE_PART_BG, &page_style);//添加风格
lv_obj_align(cont, NULL, LV_ALIGN_IN_TOP_LEFT, 0, 0);//左上角对齐

lv_obj_t* label_place = lv_label_create(cont, NULL);//容器上地点标签   
lv_obj_add_style(label_place, LV_LABEL_PART_MAIN, &label_style);//增加字体样式
lv_label_set_text(label_place, LV_SYMBOL_MYGPS2 );
lv_obj_align(label_place, cont, LV_ALIGN_IN_LEFT_MID, 15, 0);//标签左上角对齐

lv_obj_t* label_title = lv_label_create(cont, NULL);//容器上标题标签
lv_obj_align(label_title, cont, LV_ALIGN_IN_LEFT_MID, 250, 0);//中间对齐
lv_obj_add_style(label_title, LV_LABEL_PART_MAIN, &label_title_style);//增加字体样式
lv_label_set_text(label_title, "欢迎使用智能门禁系统!");

lv_obj_t* img_wifi = lv_img_create(cont, NULL);//容器上wifi图标
lv_img_set_src(img_wifi, LV_SYMBOL_WIFI);
lv_obj_align(img_wifi, cont, LV_ALIGN_IN_LEFT_MID, 610, 0);//右上角对齐

unicode码转化为UTF-8格式可使用：https://www.qqxiuzi.cn/bianma/Unicode-UTF.php
实际效果如下图：