LVGL显示框架下，图片如何以字体显示的方式显示

一.设计思路

LVGL是一款开源的轻量型图形库，具体包含哪些控件，哪些优势功能，详细的文本资料可以直接阅读官方网站，这里不做过多赘诉。
本章节内容，主要是实现如何将一张图片，通过LVGL的FontConverter工具，以字体显示的方式来显示在屏幕上。
一张JPG格式的图片如果通过LVGL的image converter来进行转化处理的话，会占用大量的内存空间。针对如下图所示的所含颜色位数不多的JGP图片而言，如果改用以字体显示的方式去显示，能够节省不少空间。

LVGL所提供的fontconverter工具，并不支持直接修改JPG格式图片，支持的文件格式为TTF/WOFF的字体文件格式。所以如果要实现通过FontConverter工具去实现转化，并输出为对应的C文件的话，则需要先将JPG图片转换为TTF或者WOFF格式文件。
这里不多废话，直接将此次需要使用的转化工具链接提供如下。

在线字体编辑器魔法精灵
链接: https://font.eelf.cn
LVGL官网提供的字体转换器
链接: https://lvgl.io/tools/fontconverter

二.处理方式

1.文件转换处理

1.进入到在线字体编辑器，点击新字形，然后点击导入图片，选中图片将被导入到项目中。这里只是简单操作，并不涉及图片修改等其他操作。（直接将JPG图片导入，一定程度上会和原图存在部分差异，追求一模一样，建议可以先处理为SVG格式图片，然后导入）

2.点击保存后，会在右上角方框中出现对应得图标，说明保存成功。

3.在该编辑页面下单击鼠标右键，在对应选项中选择字形信息，unicode可以根据自己的需求去设计，该编码是LVGL字体转换器所需要使用的。最后导出对应的字体文件即可，导出TTF或者其他格式，本案例中导出TTF文件。（注意：这里的$38等同与0x38,相当于字符中的数字“8”,ASCII值为56）

4.该使用工具需要注意一点的是，需要添加缺失字形，否则导出TTF文件后，使用LVGL加载字体文件会出现无法查找到字体的错误。具体的解释在该使用工具的说明也有，具体如下：

5.通过补充，添加后的缺失字形,具体如下：

6.通过预览选项可以看到显示字体正常。

7.选中TTF选项，即可将当前右上方的字形导出。其导出的具体内容可见字体内容。

2.LVGL字体转化工具处理

具体操作方法可见下图。
1.添加字体文件。
2.填写对应的编码值。
3.填写文件名称和选择文字的大小。

三.演示效果

LVGL生成的C文件内容

#ifndef UI_FONT_ICONFONT24
#define UI_FONT_ICONFONT24 1
#endif

#if UI_FONT_ICONFONT24

/*-----------------
 *    BITMAPS
 *----------------*/

/*Store the image of the glyphs*/
static LV_ATTRIBUTE_LARGE_CONST const uint8_t glyph_bitmap[] = {
    /* U+0038 "8" */
    0x0, 0x0, 0x0, 0x0, 0x5b, 0x20, 0x0, 0x0,
    0x0, 0x0, 0xdf, 0x60, 0x0, 0x0, 0x0, 0x0,
    0x36, 0x0, 0x0, 0x0, 0x1c, 0xcc, 0x90, 0x0,
    0x0, 0x0, 0x88, 0x7f, 0xf0, 0x0, 0x0, 0x0,
    0xd0, 0x9f, 0xb0, 0x0, 0x0, 0x4, 0x80, 0xff,
    0x3c, 0xf2, 0x0, 0x0, 0x3, 0xff, 0x31, 0x10,
    0x0, 0x0, 0x0, 0x1c, 0xe3, 0x0, 0x0, 0x0,
    0x3e, 0x20, 0xdd, 0x10, 0xb, 0xff, 0xff, 0x10,
    0x2f, 0x80, 0x4, 0x65, 0x52, 0x0, 0xd, 0xb0,
    0x0, 0x0, 0x0, 0x0, 0xb, 0x80, 0x0, 0x0,
    0x0, 0x0, 0x4, 0x0
};


/*---------------------
 *  GLYPH DESCRIPTION
 *--------------------*/

static const lv_font_fmt_txt_glyph_dsc_t glyph_dsc[] = {
    {.bitmap_index = 0, .adv_w = 0, .box_w = 0, .box_h = 0, .ofs_x = 0, .ofs_y = 0} /* id = 0 reserved */,
    {.bitmap_index = 0, .adv_w = 768, .box_w = 12, .box_h = 14, .ofs_x = 0, .ofs_y = 0}
};

/*---------------------
 *  CHARACTER MAPPING
 *--------------------*/



/*Collect the unicode lists and glyph_id offsets*/
static const lv_font_fmt_txt_cmap_t cmaps[] =
{
    {
        .range_start = 56, .range_length = 1, .glyph_id_start = 1,
        .unicode_list = NULL, .glyph_id_ofs_list = NULL, .list_length = 0, .type = LV_FONT_FMT_TXT_CMAP_FORMAT0_TINY
    }
};



/*--------------------
 *  ALL CUSTOM DATA
 *--------------------*/

#if LVGL_VERSION_MAJOR == 8
/*Store all the custom data of the font*/
static  lv_font_fmt_txt_glyph_cache_t cache;
#endif

#if LVGL_VERSION_MAJOR >= 8
static const lv_font_fmt_txt_dsc_t font_dsc = {
#else
static lv_font_fmt_txt_dsc_t font_dsc = {
#endif
    .glyph_bitmap = glyph_bitmap,
    .glyph_dsc = glyph_dsc,
    .cmaps = cmaps,
    .kern_dsc = NULL,
    .kern_scale = 0,
    .cmap_num = 1,
    .bpp = 4,
    .kern_classes = 0,
    .bitmap_format = 0,
#if LVGL_VERSION_MAJOR == 8
    .cache = &cache
#endif
};

extern const lv_font_t ui_font_iconfont24;


/*-----------------
 *  PUBLIC FONT
 *----------------*/

/*Initialize a public general font descriptor*/
#if LVGL_VERSION_MAJOR >= 8
const lv_font_t ui_font_iconfont24 = {
#else
lv_font_t ui_font_iconfont24 = {
#endif
    .get_glyph_dsc = lv_font_get_glyph_dsc_fmt_txt,    /*Function pointer to get glyph's data*/
    .get_glyph_bitmap = lv_font_get_bitmap_fmt_txt,    /*Function pointer to get glyph's bitmap*/
    .line_height = 14,          /*The maximum line height required by the font*/
    .base_line = 0,             /*Baseline measured from the bottom of the line*/
#if !(LVGL_VERSION_MAJOR == 6 && LVGL_VERSION_MINOR == 0)
    .subpx = LV_FONT_SUBPX_NONE,
#endif
#if LV_VERSION_CHECK(7, 4, 0) || LVGL_VERSION_MAJOR >= 8
    .underline_position = 2,
    .underline_thickness = 0,
#endif
    .dsc = &font_dsc,          /*The custom font data. Will be accessed by `get_glyph_bitmap/dsc` */
#if LV_VERSION_CHECK(8, 2, 0) || LVGL_VERSION_MAJOR >= 9
    .fallback = &ui_font_iconfont24,
#endif
    .user_data = NULL,
};



#endif /*#if UI_FONT_ICONFONT24*/

项目例程所对应的显示图标的部分代码内容

    //LVGL部分显示跑步图标的代码
    ui_StepiconLabel = lv_label_create(ui_HomePage);
    lv_obj_set_width(ui_StepiconLabel, LV_SIZE_CONTENT);   /// 1
    lv_obj_set_height(ui_StepiconLabel, LV_SIZE_CONTENT);    /// 1
    lv_obj_set_x(ui_StepiconLabel, -80);
    lv_obj_set_y(ui_StepiconLabel, -5);
    lv_obj_set_align(ui_StepiconLabel, LV_ALIGN_CENTER);
    lv_label_set_text(ui_StepiconLabel, "8");  //设置显示字体的内容
    lv_obj_set_style_text_color(ui_StepiconLabel, lv_color_hex(0x3278FF), LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_text_opa(ui_StepiconLabel, 255, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_text_font(ui_StepiconLabel, &ui_font_iconfont24, LV_PART_MAIN | LV_STATE_DEFAULT);