你的浏览器版本过低,可能导致网站不能正常访问!
为了你能正常使用网站功能,请使用这些浏览器。

【经验分享】LVGL:分分钟教你学会字体使用方法(超级简单)

[复制链接]
STMCU小助手 发布时间:2022-3-7 23:07

前言
①只显示汉字等字符
②只显示图标字体
③同时显示汉字和图标字体
最终效果如下:

5{(ZWUVQI[U@DIHSI(KQ15N.png

前言
网上关于LVGL字体的工具和教程很多,总的来说使用起来都很麻烦,都会有这样那样的限制,有的还要敲命令啥的太麻烦了。官方的网页转换还是挺方便的,也不需要搞什么复杂的操作。这里只介绍一下官方工具的使用方法。不过需要网速稍微快一点。

①只显示汉字等字符
首先进入LVGL官网,右上角找到字体工具:Font convertor

KHSSI`PF%OW56BMK4D7DPVR.png

按照下图选择设置你的字体参数:
T)N7B@9DO@XDW}X06_[CF%B.png

代码中先声明字体,如下:

YN[J15[GPJ04N]$W[_N~7(I.png

使用的时候先设置字体,再根据需要输入你想要的字符:

@~P_}8N$EACG]@Y]%B`7QNW.png

②只显示图标字体
只显示图标字体步骤和①相同,唯一不同的是就是需要输入你的图标的Unicode编码。本人用的Iconfon上的图标,Unicode编码每个图标都有显示,如果不清楚在下载得到的文件中也能找到Unicode编码。

0T}SM4TXE58_{_3NK)3TBA3.png

下载后得到的文件如下:

~0XBP6~1}A_%}6S7RNZT[{2.png

接下来就是将Unicode编码转成Utf-8编码,可以直接百度搜索在线转换的,也可以找其他工具,这里就不在赘述了。
使用时除了声明字体还要声明要使用的图标:

M}SF1IN(B6QQ[PJM049HY.png

使用的时候直接写上声明的图标即可:

IMM2Q@75$T]DJOFZN{`ZJ7T.png

最终效果如下:

V@X(Q[}1YIE){B8D~$`4QBG.png

③同时显示汉字和图标字体
想要同时显示汉字和图标字体就是将第一种和第二种方法组合起来。在官方网页中有一个Include another font的选项,这样可以用过将两种不同字体中想要的东西组合起来,具体步骤参考第①和第②种情况即可。

8Y0OBH)VPWAW92WSVDZ}I3H.png

最终效果如下:

`JCQV6I}WC}65U4RRVUL]`O.png

备注:官网经常提示参数错误,首先检测自己填的范围对不对,如果还不行那就刷新一下页面,重新填。一定要等页面加载完成再设置。


收藏 评论0 发布时间:2022-3-7 23:07

举报

0个回答

所属标签

相似技术帖

官网相关资源

关于
我们是谁
投资者关系
意法半导体可持续发展举措
创新与技术
意法半导体官网
联系我们
联系ST分支机构
寻找销售人员和分销渠道
社区
媒体中心
活动与培训
隐私策略
隐私策略
Cookies管理
行使您的权利
官方最新发布
STM32N6 AI生态系统
STM32MCU,MPU高性能GUI
ST ACEPACK电源模块
意法半导体生物传感器
STM32Cube扩展软件包
关注我们
st-img 微信公众号
st-img 手机版