1. 官方在线字体转换工具

lvgl 自带拥有一定数量的不同字号常用的 ASCII 字符字库，但是 lvgl 自带的字库一般无法适应我们所有的使用场景，比如我们需要的最大字号超出了已有字库的字号范围，我们需要使用中文字体等情况下我们就需要自定义字库（自制字库），基于这样的情况 lvgl 官方也为我们提供了字库的生成工具，该工具是网页版本需要在线使用。具体样式和使用方法如下图。

转换工具链接：https://lvgl.io/tools/fontconverter

2. 字库内容分析

2.1 字库内容

/*******************************************************************************
 * Size: 16 px
 * Bpp: 4
 * Opts: 
 ******************************************************************************/

#ifdef LV_LVGL_H_INCLUDE_SIMPLE
#include "lvgl.h"
#else
#include "lvgl/lvgl.h"
#endif

#ifndef FONT_EN_16X16
#define FONT_EN_16X16 1
#endif

#if FONT_EN_16X16

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

/*Store the image of the glyphs*/
static LV_ATTRIBUTE_LARGE_CONST const uint8_t glyph_bitmap[] = {
    /* U+516C "公" */
    0x0, 0x0, 0x3, 0x0, 0x5, 0x30, 0x0, 0x0,
    0x0, 0x0, 0x1f, 0x60, 0xa, 0xb0, 0x0, 0x0,
    0x0, 0x0, 0xad, 0x0, 0x3, 0xf4, 0x0, 0x0,
    0x0, 0x4, 0xf4, 0x0, 0x0, 0xae, 0x10, 0x0,
    0x0, 0x2e, 0x90, 0x0, 0x0, 0xe, 0xc0, 0x0,
    0x1, 0xdd, 0x0, 0x0, 0x0, 0x2, 0xec, 0x10,
    0x1d, 0xe1, 0x0, 0x58, 0x0, 0x0, 0x2e, 0xf5,
    0x8e, 0x20, 0x0, 0xeb, 0x0, 0x0, 0x1, 0xc4,
    0x1, 0x0, 0x7, 0xf1, 0x0, 0x0, 0x0, 0x0,
    0x0, 0x0, 0x2f, 0x70, 0x3, 0x70, 0x0, 0x0,
    0x0, 0x0, 0xbc, 0x0, 0x3, 0xf4, 0x0, 0x0,
    0x0, 0x7, 0xf2, 0x0, 0x0, 0x8e, 0x10, 0x0,
    0x0, 0x5f, 0x50, 0x11, 0x23, 0x4e, 0xc0, 0x0,
    0x4, 0xff, 0xff, 0xff, 0xff, 0xed, 0xf7, 0x0,
    0x0, 0x86, 0x43, 0x21, 0x0, 0x0, 0x8d, 0x0,
    0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x1, 0x0,

    /* U+53F8 "司" */
    0x4, 0x44, 0x44, 0x44, 0x44, 0x44, 0x44, 0x11,
    0xee, 0xee, 0xee, 0xee, 0xee, 0xee, 0xf6, 0x0,
    0x0, 0x0, 0x0, 0x0, 0x0, 0xe, 0x62, 0x33,
    0x33, 0x33, 0x33, 0x33, 0x30, 0xe6, 0xbf, 0xff,
    0xff, 0xff, 0xff, 0xff, 0x2e, 0x60, 0x0, 0x0,
    0x0, 0x0, 0x0, 0x0, 0xe6, 0x1, 0x33, 0x33,
    0x33, 0x33, 0x0, 0xe, 0x60, 0x6f, 0xee, 0xee,
    0xef, 0xf0, 0x0, 0xe6, 0x6, 0xd0, 0x0, 0x0,
    0x5f, 0x0, 0xe, 0x60, 0x6d, 0x0, 0x0, 0x5,
    0xf0, 0x0, 0xe6, 0x6, 0xd0, 0x0, 0x0, 0x5f,
    0x0, 0xe, 0x60, 0x6f, 0xff, 0xff, 0xff, 0xf0,
    0x0, 0xe6, 0x6, 0xd1, 0x11, 0x11, 0x11, 0x0,
    0xe, 0x60, 0x36, 0x0, 0x0, 0x0, 0x34, 0x36,
    0xf4, 0x0, 0x0, 0x0, 0x0, 0x9, 0xff, 0xfb,
    0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0, 0x0,

    /* U+679C "果" */
    0x0, 0x8c, 0xcc, 0xcc, 0xcc, 0xcc, 0xcc, 0x10,
    0x0, 0xb, 0xa4, 0x44, 0x8d, 0x44, 0x45, 0xf2,
    0x0, 0x0, 0xb7, 0x0, 0x6, 0xd0, 0x0, 0xf,
    0x20, 0x0, 0xb, 0xff, 0xff, 0xff, 0xff, 0xff,
    0xf2, 0x0, 0x0, 0xb8, 0x11, 0x16, 0xd1, 0x11,
    0x1f, 0x20, 0x0, 0xb, 0x80, 0x0, 0x6d, 0x0,
    0x1, 0xf2, 0x0, 0x0, 0xbf, 0xff, 0xff, 0xff,
    0xff, 0xff, 0x20, 0x0, 0x4, 0x30, 0x0, 0x6d,
    0x0, 0x0, 0x60, 0x0, 0x2, 0x22, 0x22, 0x27,
    0xd2, 0x22, 0x22, 0x21, 0x3, 0xff, 0xff, 0xff,
    0xff, 0xff, 0xff, 0xff, 0xa0, 0x0, 0x0, 0x4,
    0xea, 0xdc, 0x70, 0x0, 0x0, 0x0, 0x0, 0x9,
    0xe3, 0x6d, 0x1c, 0xb2, 0x0, 0x0, 0x0, 0x6e,
    0xb1, 0x6, 0xd0, 0x8, 0xfb, 0x50, 0x3, 0xfd,
    0x40, 0x0, 0x6d, 0x0, 0x2, 0xaf, 0xb0, 0x4,
    0x0, 0x0, 0x6, 0xd0, 0x0, 0x0, 0x0, 0x0,

    /* U+82F9 "苹" */
    0x0, 0x0, 0x15, 0x0, 0x0, 0x24, 0x0, 0x0,
    0x0, 0x0, 0x4e, 0x0, 0x0, 0x6c, 0x0, 0x0,
    0x6f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfd,
    0x2, 0x22, 0x6e, 0x22, 0x22, 0x7c, 0x22, 0x22,
    0x0, 0x0, 0x27, 0x0, 0x0, 0x36, 0x0, 0x0,
    0xa, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf2,
    0x1, 0x27, 0x22, 0x27, 0xd2, 0x22, 0x54, 0x20,
    0x0, 0xe, 0x70, 0x6, 0xd0, 0x0, 0xda, 0x0,
    0x0, 0x5, 0xf2, 0x6, 0xd0, 0xa, 0xe1, 0x0,
    0x0, 0x0, 0xbc, 0x6, 0xd0, 0x5f, 0x30, 0x0,
    0x2, 0x22, 0x44, 0x27, 0xd2, 0x25, 0x22, 0x21,
    0x5f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfc,
    0x0, 0x0, 0x0, 0x6, 0xd0, 0x0, 0x0, 0x0,
    0x0, 0x0, 0x0, 0x6, 0xd0, 0x0, 0x0, 0x0,
    0x0, 0x0, 0x0, 0x6, 0xd0, 0x0, 0x0, 0x0,
    0x0, 0x0, 0x0, 0x6, 0xd0, 0x0, 0x0, 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 = 256, .box_w = 16, .box_h = 16, .ofs_x = 0, .ofs_y = -3},
    {.bitmap_index = 128, .adv_w = 256, .box_w = 15, .box_h = 16, .ofs_x = 0, .ofs_y = -3},
    {.bitmap_index = 248, .adv_w = 256, .box_w = 17, .box_h = 15, .ofs_x = 0, .ofs_y = -2},
    {.bitmap_index = 376, .adv_w = 256, .box_w = 16, .box_h = 16, .ofs_x = 0, .ofs_y = -2}
};

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

static const uint16_t unicode_list_0[] = {
    0x0, 0x28c, 0x1630, 0x318d
};

/*Collect the unicode lists and glyph_id offsets*/
static const lv_font_fmt_txt_cmap_t cmaps[] =
{
    {
        .range_start = 20844, .range_length = 12686, .glyph_id_start = 1,
        .unicode_list = unicode_list_0, .glyph_id_ofs_list = NULL, .list_length = 4, .type = LV_FONT_FMT_TXT_CMAP_SPARSE_TINY
    }
};



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

#if LV_VERSION_CHECK(8, 0, 0)
/*Store all the custom data of the font*/
static  lv_font_fmt_txt_glyph_cache_t cache;
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 LV_VERSION_CHECK(8, 0, 0)
    .cache = &cache
#endif
};


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

/*Initialize a public general font descriptor*/
#if LV_VERSION_CHECK(8, 0, 0)
const lv_font_t font_en_16x16 = {
#else
lv_font_t font_en_16x16 = {
#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 = 17,          /*The maximum line height required by the font*/
    .base_line = 3,             /*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 = -1,
    .underline_thickness = 1,
#endif
    .dsc = &font_dsc           /*The custom font data. Will be accessed by `get_glyph_bitmap/dsc` */
};



#endif /*#if FONT_EN_16X16*/

2.2 内容分析

glyph_bitmap 字形屏幕像素映射
glyph_dsc 象形字描述
unicode_list_0 unicode 列表（字符映射）
cmaps 收集 unicode 列表和字符偏移
font_dsc 字体描述，用于将上面的信息收集打包
font_en_16x16 这就是程序中 label 等组件可以使用的字库了。

3. 使用

3.1 声明字体

LV_FONT_DECLARE(font_en_16x16)

3.2 创建组件

lv_obj_t * label = lv_label_create(lv_scr_act(), NULL);
lv_label_set_text(label, "苹果公司");
lv_obj_center(label);

3.3 设置组件使用的字体和颜色

lv_obj_set_style_text_font(label, &font_en_16x16, 0);
lv_obj_set_style_text_color(label, lv_color_make(0xff, 0x00, 0x00), 0);

3.4 配置编译运行字体为utf-8

#pragma execution_character_set("utf-8")