LVGL支持中文字体实践指南

一、背景

前两天在研究一个UI项目，需要支持中文字体。项目用到的是LVGL 7.11版本，默认情况下只支持英文和数字（其他LVGL版本也一样）。所以要想用上中文，必须要自己动手加上中文字体的支持。

二、先来个效果图

默认情况是这样的：（只能显示数字 1，其他中文内容都看不到）
改完之后是这样的：（ 可以完整显示内容）

三、实践过程

1、浏览官网LVGL字体相关资料

官方的LVGL 字体相关说明中找到了添加字体部分。内容如下：

大概是说有三种方法生成字体文件，以及如何在代码中使用字体文件，具体方法请继续往下看。

2、用官方工具生成字体文件

我先选择了在线工具，但我找了几个字体文件后，发现生成经常报错（其中一个错误如下图所示），也没有找到原因。

3、改用第三方工具LvglFontTool

于是又找了一个第三方工具 LvglFontTool，看起来还挺好用的，界面也比较清新。

按照网上的一些提示，选择了对应的字体文件，并选择工具中【加入常用汉字】按钮，然后生成。

4、修改相关源码

生成文件后按照官方提示的加入到代码中，具体修改内容如下：

自动生成的lv_fon_sans_28.c文件主要内容

//下面这个变量需要在其他文件中引用
lv_font_t lv_font_sans_28 = {.dsc = &font_dsc,.get_glyph_bitmap = __user_font_get_bitmap,.get_glyph_dsc = __user_font_get_glyph_dsc,.line_height = 32,.base_line = 0,
};

修改lv_con.h文件

// ...........* https://fonts.google.com/specimen/Montserrat  */
#ifndef LV_USING_FREETYPE_ENGINE#define LV_FONT_MONTSERRAT_12    1#define LV_FONT_MONTSERRAT_14    0#define LV_FONT_MONTSERRAT_16    1#define LV_FONT_MONTSERRAT_18    0#define LV_FONT_MONTSERRAT_20    1#define LV_FONT_MONTSERRAT_22    0#define LV_FONT_MONTSERRAT_24    1#define LV_FONT_MONTSERRAT_26    0#define LV_FONT_MONTSERRAT_28    0//1  关闭默认28号字体
//..............//LV_FONT_CUSTOM_DECLARE  最后一行添加 自定义lv_font_sans_28字体声明
#define LV_FONT_CUSTOM_DECLARE LV_FONT_DECLARE(lv_font_song) \LV_FONT_DECLARE(lvsf_font_stfangso_16) \LV_FONT_DECLARE(lvsf_font_stfangso_20) \LV_FONT_DECLARE(lvsf_font_simhei_16) \LV_FONT_DECLARE(lvsf_font_simhei_20) \LV_FONT_DECLARE(lv_font_sans_28) \
//..............
#if LV_HOR_RES_MAX > 350#define LV_THEME_DEFAULT_FONT_SMALL         &lv_font_montserrat_16#define LV_THEME_DEFAULT_FONT_NORMAL        &lv_font_montserrat_20#define LV_THEME_DEFAULT_FONT_SUBTITLE      &lv_font_montserrat_24//将TITLE字号改为：自定义lv_font_sans_28字体#define LV_THEME_DEFAULT_FONT_TITLE         &lv_font_sans_28 //&lv_font_montserrat_28#define LV_THEME_DEFAULT_FONT_BIGL          &lv_font_montserrat_36
#else
// ......
#endif

注意：这里根据实际控件中使用的字体来进行修改，我这里因为控件使用了lv_theme_get_font_subtitle定义的字体，所以修改了LV_THEME_DEFAULT_FONT_TITLE定义的字体。

5、显示失败

看完自己修改完后一次就编译通过了，就知道可能大事不好， 果不其然，什么中文都没显示，还是只有数字 1。

好在有如下图所示的错误提示了，lv_draw_letter: glyph dsc. not found。

于是我翻阅了相关代码，发现是在label控件中，画文字的时候，符号没找到。
符号是通过lv_font_get_glyph_des->__user_font_get_glyph_dsc(lv_font_sans_28.c)寻找的，于是把这个letter局部变量打印出来看了一下，发现这个好像是字符编码，但实际这个编码又不是我要显示的文字编码。

为了缩小范围，减少干扰，我把代码做了一下修改，每个label只保留一个中文字符，但奇怪的是错误提示not found也不见了， 难道是生成的字体有问题？ 于是又去折腾工具，发现怎么弄都没法显示。

6、编码问题

在尝试了多次无果后，看到官网的字体说明里看到了如下重要提示：源码文件需要保存为UTF-8编码格式，而我的源码文件默认是ANSI编码格式。

而且虽然没有提示，但实际上lv_draw_letter这个函数还是没有正常执行，在注释掉if (letter>=20)后，发现有大量的not found 0上报，而控件要显示的中文内容您好显然不是这个编码，这也验证了源文件编码问题。

7、修改源文件编码

将需要显示中文内容的源码文件的编码格式设置为UTF-8编码格式，这里我使用了windows自带的记事本，将源码文件另存为，然后选择编码格式UTF-8。

8、修改编译错误

结果在编译的时候又发现出错了，编码改回去就可以正常编译。网上查了一下发现visual studio编译器默认支持UTF-8 with BOM编码，不支持UTF-8编码格式，如果需要支持UTF-8文件，需要增加编译该文件的编译参数/utf-8，设置如下：

9、成功显示

设置完后，编译终于大功告成，可以正常显示中文了。

四、总结

LVGL字体替换的软件设计还是不错的，但工具做得并不是很好，而且过程中容易踩坑，网上相关资料也不多，需要自行摸索。特别是针对中文这类的外文字体。我个人有四点建议：

1、仔细阅读官方文档，知道整个流程和限制；
2、使用第三方字体转换工具（官方字体转换工具并不是很好用，特别是出现错误提示并不友好）；
3、字体文件一定要选择支持中文的字体文件，否则第三方工具并不提示错误，但实际却不能显示；
4、注意默认情况下只支持UTF-8文件编码格式，否则会出现编码问题导致无法显示。