在实际开发中,我们通常是使用自定义字体。
在 LVGL 中,用户需要使用自定义的字库,其实现方法可分为两类:
① 通过 C 语言数组(内部读取);
② 通过文件系统读取字库(外部读取)。
使用 C语言数组的方式来读取字库是非常便捷的,工程中需要配置的地方很少,这对于初
学者来说非常友好。
对于LVGL本身如何使用字体,可以直接参考《LVGL开发指南》的第八章 LVGL 字库使用。
此处不赘述。
注意,LVGL的字体总是要有个默认字体,在lv_conf.h中设置
如果将LVGL自带的字体都写0,那么就要换一个自定义的字体来作为默认字体,如果都没有,就会报错。
本文重点讲解guider如何使用自定义字体。
使用gui-guider之后,就不用自己去生成图片的c数组了,字体也同样如此。
参考这篇文章:
LVGL学习(1):中文字体的转换和汉字显示_lvgl显示中文-CSDN博客
具体过程我们继续往下看。
Gui Guider使用自定义字体
打开GUI-Guider-1.4.0-GA,点击工具-导入字体
导入的字体格式支持ttf/woff/woff2三种格式。
不过,很多时候我们下载到的字体格式可能是.otf,比如
此时,可以强制将.otf后缀改成.ttf后缀,如下
直接将otf等字体的后缀名改为ttf导入,一样是可以使用的。
导入后,就会在字体选项中出现对应的字体
此时,我们就可以在使用标签部件时选择对应的自定义字体了。
然后在生成代码时,就会自动转换字体
注意,每个按钮都有个默认值,如果我们不使用这个默认值可以将其删除掉。
很容易被忽略,要注意。
自定义字体移植到LVGL中
当我们使用GUI Guider生成代码之后,在工程目录下的/generated/guider_fonts中就出现对应的字体文件。
这样就不需要我们手动去看我们所有的界面中使用了哪些文字,然后用转换工具一个一个地转换了,包括后期如果觉得字体太小或太大,在guider中修改都是非常方便的。所以这也是我常用的和推荐的转换方式。
我们随便打开一个字体c文件看看
文件开头就列出了后续要使用该字体时被引用的名字,然后就是字库的数据信息。
另外,在该目录下,有一个guider_fonts.h头文件,打开
这里面是所有字体文件的声明。
我们将所有字体导入到keil工程中,并添加对应的头文件路径。
之后编译看看,可能会有大量报错,根据提示来修改即可。
错误1:
主要是头文件路径的问题:
找到对应位置:
查找lv_font.h的路径如下
根据实际的相对位置,更改头文件路径如下:
错误2:
另外,还有个custom的报错,这里因为我们没有使用custom这个目录,所以直接找到对应位置将其屏蔽掉。
经过多次修改画面,发现屏蔽该头文件太麻烦,所以还是连带custom文件夹一起拷贝过来,虽然不用,但是放着也无妨。
错误3:
只要有中文的地方,就会报错
原因:keil5不认识UTF-8无BOM编码
解决办法参考:
keil error:#8:missing closing quote 处理_error: #8: missing closing quote-CSDN博客
直接使用该解决方式:
在KEIL中Options for Target 'Flash' -> C/C++ -> Misc Controls添加“--locale=english”。
自定义图标字体
图标字体是 web 前端中流行的一种技术,它以字体的形式,呈现出一个单色的图标。在LVGL 中,自带了许多常用图标字体,这极大地方便了用户的界面开发。大家需要使用这些图标字体,可以打开lv_symbol_def.h文件,查找相应的图标字体枚举,部分示例如下:
当用户调用上述的图标字体枚举,它们将显示成图标,如下图所示:
不过,guider里面没法直接使用图标字体,需要生成后,自行在代码里实现。
Solved: Gui-Guider 使用LVGL默认字体图标问题 - NXP Community
而且,LVGL内部图标字体样式是固定的,没法设置大小颜色等,局限性较大。
我们这里主要讲解自定义图标字体的使用。
打开阿里巴巴矢量图标库,然后注册
iconfont-阿里巴巴矢量图标库
搜索想要的图标,如wifi
把光标移动到对应的图标上,点击“购物车”,将对应的图标添加到购物车。注意,别点直接下载,而是先加入购物车。
这一步,我们将所有要用到的图标都加入购物车,而不是一个一个地去下载。
选完图标后。点击网页右上角的“购物车”图标
接着将这些图标加入项目,可以创建一个项目并加入其中
之后点击确定,就会自动进入我的项目界面,可以看到选中的所有图标,在下载这些图标之前,我们可以对其进行编辑,将其修改成我们想要的样式
比如
编辑完成之后,就可以保存为副本了。仅保存就是效果应用于当前图标,不会建立副本。
确认无误后,点击下载至本地
下载后解压并打开,可以看到里面有对应的字体文件
接下来有两种使用方式
第一种,手动撸代码
使用 LVGL 官方的在线字体转换工具(网址:https://lvgl.io/tools/fontconverter),将字库文件(例如 TTF)转换成 C 语言数组字体文件
选择上面生成的ttf字体文件。
注意,范围Range那里对应的就是图标网站里对应的unicode码
后四位就是我们想要的,我们将其改成十六进制的形式填写入上方的Range框内,之间用英文逗号隔开。
确认无误后,就可以点击Convert进行转换了。
此时,会生成对应的字体c文件。
然后将该文件添加到工程中,并为其添加对应头文件
然后在头文件里进行字体的声明和宏定义,便于调用。
注意,lvgl默认只能识别UTF-8编码,所以我们这里的宏定义所定义的内容需要按照上述格式进行书写,并将对应的UTF-8编码填入。不过,我们知道的是Unicode编码,并不知道对应的UTF-8编码,因此需要进行编码转换。
提供该转换网站:
Unicode编码转换,UTF编码转换(UTF-8、UTF-16、UTF-32)
然后,就按照常规使用图标字体的方式来使用即可。
示例如下:
注意,图标字体基本只能设置位置,其他样式设置无效。
不过……………………………………】
一顿操作猛如虎,最后发现根本就显示不了,而且没找到是啥原因。
所以只能暂时放弃这种方式,另谋出路。
第二种,使用guider来绘制
图标字体,本质上是一种字体,所以我们尝试着按照普通字体的形式来使用。
上面我们已经从图标网下载好了我们的目标字体文件,此时,我们将其当做普通字体导入guider里面。
接着,选择一个label标签组件,然后将图标对应的字符粘贴进入,然后为其选择对应的字体。就能显示对应的图案了。
我们还能像字体一样设置该图案的大小和颜色。
这里的关键就是,文本内容填啥?
填的就是我们上面unicode编码转换成的字符
我们将该字符复制到文本区域即可。
虽然看起来是个框,但确实是有实际内容的。
之后,正常生成代码使用即可。
这种方式,不用我们自己去手撸代码了。
我们再接着看下对应的程序代码
这里面设置的字体是对应的字体,文本内容看起来像个空格,但确实是有对应的内容,也可以正常显示。
不过,这种方式有个缺点,那就是只能显示guider自动生成的图标字体,自己把字符拷贝过去粘贴到代码里就没效果了。因此只适合图案固定不变的图标内容。样式我们可以在代码里自行修改。一般图标都不会改变图案形状,顶多只会变变颜色样式。而且,我们在下载图标时不用编辑他们的样式,而是留到guider里面去设置。