LVGL lv_font字体（7）

lv_font

font的声明在lv_font.h中，lvgl自带了很多大小字库就是在这里声明，比如

#define LV_FONT_DECLARE(font_name) extern lv_font_t font_name;
#if LV_FONT_MONTSERRAT_8
LV_FONT_DECLARE(lv_font_montserrat_8)
#endif

其中LV_FONT_MONTSERRAT_8在lv_conf.h来控制是否包含进去

图标字体

如下是lvgl自带图标字体，在lv_symbol_def.h中定义，效果如下

例子

void lv_font_test(void)
{
	lv_obj_t* font_label;
	lv_obj_t* font_label1;
	lv_obj_t* src = lv_scr_act();

	static lv_style_t font_style;
	lv_style_init(&font_style);
	lv_style_set_text_font(&font_style, LV_STATE_DEFAULT, &lv_font_montserrat_12);
	font_label = lv_label_create(src, NULL);
	lv_obj_add_style(font_label,LV_LABEL_PART_MAIN, &font_style);
	lv_label_set_text_static(font_label, LV_SYMBOL_AUDIO " audio");
	lv_obj_align(font_label, NULL, LV_ALIGN_CENTER, 0, 0);

	static lv_style_t font_style1;
	lv_style_init(&font_style1);
	lv_style_set_text_font(&font_style1, LV_STATE_DEFAULT, &lv_font_montserrat_24);
	font_label1 = lv_label_create(src, NULL);
	lv_obj_add_style(font_label1, LV_LABEL_PART_MAIN, &font_style1);
	lv_label_set_text_static(font_label1, LV_SYMBOL_VIDEO " video");
	lv_obj_align(font_label1, NULL, LV_ALIGN_CENTER, 0, 30);
}

效果

创建字体

离线字体转换工具

win7安装node.js 13.9.0版本（亲测可以）
https://nodejs.org/dist/
cmd输入

npm i lv_font_conv -g

回车运行就会把 lv_font_conv 给安装好

lv_font_conv 的主要命令行参数在github有解释
https://github.com/lvgl/lv_font_conv

例如

lv_font_conv --no-compress --format lvgl --font heiti.ttf -o my_font.c -
-bpp 4 --size 30 --symbols 中国 -r 0x20-0x7F

创建普通字体

从lv_font_conv的命令来看，创建字体需要ttf/woff/woff2字体文件、还需要输入待创建的字符
如下，创建30像素大小普通字体，只需要 0-9 十个数字和中国2个汉字就可以了,也就是总共12个字符,采用4bpp抗锯齿,然后我们构建出用于创建此字库的命令

lv_font_conv --no-compress --format lvgl --font heiti.ttf -o my_font_heiti_30.c --bpp 4 --size 30 --symbols 中 -r 0x30-0x39 -r 0x56FD

如果文本的输入模式是UTF-8就可以直接输入，否则要用宏定义汉字的UTF-8编码

LV_FONT_DECLARE(my_font);
#define ZHONG "\xE4\xB8\xAD" //中字的 UTF-8 编码
#define GUO "\xE5\x9B\xBD" //国字的 UTF-8 编码
void lv_font_test(void)
{
	lv_obj_t* font_label;
	lv_obj_t* src = lv_scr_act();

	static lv_style_t font_style;
	lv_style_init(&font_style);
	lv_style_set_text_font(&font_style, LV_STATE_DEFAULT, &my_font);
	font_label = lv_label_create(src, NULL);
	lv_obj_add_style(font_label, LV_LABEL_PART_MAIN, &font_style);
	lv_label_set_text_static(font_label, ZHONG GUO "123456" );
	lv_obj_align(font_label, NULL, LV_ALIGN_CENTER, 0, 0);
}

创建图标字体

创建图标字体也是要获得ttf/woff/woff2字体文件，然后用转换工具
如下网址 https://www.iconfont.cn/
注册新建好项目，添加图标到项目后下载，比如

用如下命令

lv_font_conv --no-compress --format lvgl --font iconfont.ttf -o my_font_icon_30.c --bpp 4 --size 30 –r 0xe65b

0xe65b就是之前图标的 unicode 编码，添加这个c文件，然后和之前用法一样，lvgl只能接受utf-8编码，所以要把图标的 unicode 编码转化成 utf-8 编码，
可以用这个网址http://www.ltg.ed.ac.uk/~richard/utf-8.cgi

LV_FONT_DECLARE(my_font_icon_30);
#define MY_ICON "\xee\xb1\x90"
void lv_font_test(void)
{
	lv_obj_t* font_label;
	lv_obj_t* src = lv_scr_act();

	static lv_style_t font_style;
	lv_style_init(&font_style);
	lv_style_set_text_font(&font_style, LV_STATE_DEFAULT, &my_font_icon_30);
	font_label = lv_label_create(src, NULL);
	lv_obj_add_style(font_label, LV_LABEL_PART_MAIN, &font_style);
	lv_label_set_text(font_label, MY_ICON );
	lv_obj_align(font_label, NULL, LV_ALIGN_CENTER, 0, 0);
}

效果如下

创建合并字体

有时需要在一个label控件上同时显示普通字符和图标字符，就可以创建合并字体
，是让多个ttf（wof或woff2）文件中的字符合并到一个字库，也就是生成一个c字库文件，比如要把上面合成一个字库

lv_font_conv --no-compress --format lvgl --font heiti.ttf -r 0x20-0x7F --symbols 中国 --font iconfont.ttf -r 0xec50  -o my_font_icon_30.c --bpp 4 --size 30

LV_FONT_DECLARE(my_font_icon_30);
#define MY_ICON "\xee\xb1\x90"
#define ZHONG "\xE4\xB8\xAD" //中字的 UTF-8 编码
#define GUO "\xE5\x9B\xBD" //国字的 UTF-8 编码
void lv_font_test(void)
{
	lv_obj_t* font_label;
	lv_obj_t* src = lv_scr_act();

	static lv_style_t font_style;
	lv_style_init(&font_style);
	lv_style_set_text_font(&font_style, LV_STATE_DEFAULT, &my_font_icon_30);
	font_label = lv_label_create(src, NULL);
	lv_obj_add_style(font_label, LV_LABEL_PART_MAIN, &font_style);
	lv_label_set_text(font_label, MY_ICON ZHONG GUO "123456");
	lv_obj_align(font_label, NULL, LV_ALIGN_CENTER, 0, 0);
}

效果