LVGL导入自定义字库与图标

首先声明，此文章主要内容来自lvgl8.2 自定义符号_lvgl symbol-CSDN博客，这里更多的是作为个人的学习笔记。

---

目录

导入自定义字库的步骤如下

导入自定义图标的步骤如下

---

LVGL自带的图标可以在【官方文档---Overview---Fonts---Special feature】找到

如果LVGL自带的图标不足以满足要求，可以使用自定义的图标

---

导入自定义字库的步骤如下

• 下载字库，下载好的字库会保存到一个ttf文件里面，如果不知道ttf文件是什么，请自行谷歌。windows系统自带的字体保存在这个目录下面c:\windows\fonts，如果需要其他的，自行上网下载，网上资源丰富。（除了使用ttf文件外，还可以使用woff文件，这里不做介绍）
• 将ttf文件里面的文字转换成.c文件。

使用LVGL官方字体转换网站：https://lvgl.io/tools/fontconverter

• 为了方便管理，创建一个同名的.h文件（MyFonts32.h）
• 在.c文件对应的.h文件内，声明字体。LV_FONT_DECLARE(MyFonts32);

#ifndef __MYFONTS32_H__
#define __MYFONTS32_H__

#ifdef __cplusplus
extern "C" {
#endif

#include "lvgl.h"

//声明字体
LV_FONT_DECLARE(MyFonts32);

#ifdef __cplusplus
}
#endif

#endif /* __MYFONTS32_H__*/

对于LVGL官方字体转换网站，在这个网站当中，有以下说明：

1. 给输出字体命名
2. 指定字体的大小，单位为像素
3. 设置像素深度（抗锯齿效果），深度越大，字体看起来越流畅
4. 选择ttf文件或者woff文件
5. 使用Unicode编码的形式，列出想要转换的字体的范围，或者列出想要转换的字体的Unicode编码
6. 直接输入相应的字体。（融合进.c文件这里不太明白）
7. 点击转换，就可以下载对应的.c文件了

---

导入自定义图标的步骤如下

• 下载图标，下载好的图标会保存到一个ttf文件里面。图标的下载在文章开头的文章链接中有详细介绍。

网站：iconfont-阿里巴巴矢量图标库

注册登录，搜索想要的图标，如wifi。把光标移动到对应的图标上，点击“购物车”，将对应的图标添加到购物车。

选完图标后。点击网页右上角的“购物车”

点击下载代码

会下载一个压缩包，解压，打开

通过demo_index.html打开一个网站

而iconfont.ttf文件里面就包含了我们下载下来的图标

• 将ttf文件里面的图标转换成.c文件

• 通过图标的Unicode编码得到其UTF-8编码，在进行宏定义时，需要用到其UTF-8编码。

相关网站：https://www.qqxiuzi.cn/bianma/Unicode-UTF.php。

为什么通过图标的Unicode编码得到其UTF-8编码呢？因为在LVGL程序中，是不能通过Unicode编码来使用相应的图标的，但是可以通过UTF-8编码来使用。相关的配置，在lv_conf.h中可以看到。

• 为了方便管理，创建一个同名的.h文件（MySymbol32.h）
• 在.c文件对应的.h文件内，对图标（UTF-8）进行宏定义。如果不进行宏定义，那么在使用时，就需要使用其UTF-8编码，比较麻烦，而且可读性很差。
• 在.c文件对应的.h文件内，声明字体

#ifndef __MYSYMBOL32_H__
#define __MYSYMBOL32_H__

#ifdef __cplusplus
extern "C" {
#endif

#include "lvgl.h"

//声明字体
LV_FONT_DECLARE(MySymbol32);

//宏定义
//被替换的内容，如"\xEE\x9C\x8F"是通过图标的Unicode编码得到其UTF-8编码
//至于格式为什么是这个样子，不清楚
#define USER_SYMBOL_SETTING			"\xEE\x9C\x8F"     //Unicode:0xe70f
#define USER_SYMBOL_WIFI            "\xEE\x9D\xAC"     //Unicode:0xe76c


#ifdef __cplusplus
}
#endif

#endif /* __MYSYMBOL32_H__*/

---

在同一个字体文件内可以同时带有字库和图标，点击下图中的按键，方法与上面介绍的一致

---