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

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

[复制链接]
STMCU小助手 发布时间:2022-3-7 23:07
* |# {% ~( h, R4 u
前言
" }9 a  W5 D8 B①只显示汉字等字符
- D4 c" b/ Z4 k8 n②只显示图标字体
% \  a6 I5 {3 K+ Y- m" f; y- b③同时显示汉字和图标字体
  A# G- A8 O# J( B1 U最终效果如下:* ~9 I2 v, O  y, G6 x; E7 A
& g9 ]/ M* t. w! d
5{(ZWUVQI[U@DIHSI(KQ15N.png 3 Q4 @8 g2 F6 K' f0 s$ {  L

9 o7 F6 O6 t, b& E前言
0 [+ p1 u# |' \7 _% m网上关于LVGL字体的工具和教程很多,总的来说使用起来都很麻烦,都会有这样那样的限制,有的还要敲命令啥的太麻烦了。官方的网页转换还是挺方便的,也不需要搞什么复杂的操作。这里只介绍一下官方工具的使用方法。不过需要网速稍微快一点。$ w* M- ~) T4 u* R7 ?! o3 b

* @( ?0 J3 F8 y2 D/ ~①只显示汉字等字符  c8 L3 n6 J: o
首先进入LVGL官网,右上角找到字体工具:Font convertor
3 f* g, I! Z! @3 S' p$ O  ]4 a- h6 s# @- m' K0 w
KHSSI`PF%OW56BMK4D7DPVR.png : G! l* f4 _6 Z( k3 L
1 h& [2 e( R! F4 A' n3 K* l
按照下图选择设置你的字体参数:
! J  \5 g! D/ P3 K T)N7B@9DO@XDW}X06_[CF%B.png
; l) K* {" F$ p" L( r; {0 V& v7 i+ [
代码中先声明字体,如下:
2 B. \" v+ A8 Z0 i" c4 R: ]2 g% {# J- P9 M! U* u9 |+ }3 v; j* s5 w3 E
YN[J15[GPJ04N]$W[_N~7(I.png 6 j& O1 d2 a3 d. P( N
; Y2 f5 q4 L6 s+ E) b
使用的时候先设置字体,再根据需要输入你想要的字符:
4 k' p. Y1 Q: W7 l/ g8 a2 b3 ]' _6 |& Y3 S  t# z
@~P_}8N$EACG]@Y]%B`7QNW.png
1 \8 k6 x( p; D  k1 [
/ f, i/ ?  \; F) R3 w/ m2 u" ?②只显示图标字体
/ m) k+ w2 {6 I. S2 L6 x- Y只显示图标字体步骤和①相同,唯一不同的是就是需要输入你的图标的Unicode编码。本人用的Iconfon上的图标,Unicode编码每个图标都有显示,如果不清楚在下载得到的文件中也能找到Unicode编码。8 {: \) M% `4 B" B3 K

5 C: ~* n. n. \ 0T}SM4TXE58_{_3NK)3TBA3.png 3 Z* m* A0 v& ~8 ~( _! X" P/ p8 D

& v) V  e+ X( J0 X3 t# Q. {下载后得到的文件如下:
+ J  y2 O( L% L- _, l3 ?3 G7 l  H2 F& [3 `, o
~0XBP6~1}A_%}6S7RNZT[{2.png
3 ~/ T$ P% Z% ^- C9 B0 K1 B/ k6 W' e9 t7 z3 G
接下来就是将Unicode编码转成Utf-8编码,可以直接百度搜索在线转换的,也可以找其他工具,这里就不在赘述了。8 |' E; L" l% G9 X" `' w% U
使用时除了声明字体还要声明要使用的图标:
; K; y- ~3 ]% Y' z
4 V' B* L3 \7 ]6 Y M}SF1IN(B6QQ[PJM049HY.png . v2 j# v9 L+ |6 Q( {9 C9 H
% q0 L+ o2 ^. w, e! r% i
使用的时候直接写上声明的图标即可:
8 ~* G3 y) B& W' y7 y0 {% t4 o8 }* C% o) ^1 {. y6 W* x9 y
IMM2Q@75$T]DJOFZN{`ZJ7T.png
! e) g- S8 b" P/ F% V6 A; ]' t8 E+ s$ }0 g4 m
最终效果如下:% f- |  r# m) P: h4 T

: T" w7 h) N0 l+ k; c V@X(Q[}1YIE){B8D~$`4QBG.png
8 q" r$ N( g/ s9 _4 }  c  t, ?! q( }( F
2 K7 Z+ _: n4 S. g, {③同时显示汉字和图标字体
4 }& A' D# x; m1 p. d+ x想要同时显示汉字和图标字体就是将第一种和第二种方法组合起来。在官方网页中有一个Include another font的选项,这样可以用过将两种不同字体中想要的东西组合起来,具体步骤参考第①和第②种情况即可。
7 K4 A+ S/ U6 v# M3 X; c# A/ w) @8 f
9 h- C* S4 @8 ^& G6 | 8Y0OBH)VPWAW92WSVDZ}I3H.png - ~' {( k% b3 ~# O+ w

6 h  ?" i. p  Z* i最终效果如下:; K0 e! Y; H  H' l: y2 P

4 @- R) j4 w) h* f2 e `JCQV6I}WC}65U4RRVUL]`O.png
/ E& g) G9 S2 G2 ?7 |, L
7 r7 p2 s5 h$ i  |' q& f备注:官网经常提示参数错误,首先检测自己填的范围对不对,如果还不行那就刷新一下页面,重新填。一定要等页面加载完成再设置。
5 L% y: R" m' x4 W  y+ k" O
% Z6 ~- G0 W3 ~
) E; H% `" t: J
赞 收藏 评论0 发布时间:2022-3-7 23:07

举报

0个回答

所属标签

相似技术帖

官网相关资源

关于
我们是谁
投资者关系
意法半导体可持续发展举措
创新与技术
意法半导体官网
联系我们
联系ST分支机构
寻找销售人员和分销渠道
社区
媒体中心
活动与培训
隐私策略
隐私策略
Cookies管理
行使您的权利
官方最新发布
人形机器人运动控制、感知与智能配电
半导体创新技术与应用方向
EE架构与软件定义汽车
12V/48V 汽车智能配电(SPD)
区域控制单元(ZCU)与分区架构
关注我们
st-img 微信公众号
st-img 手机版