LVGL之SquareLine Studio UI设计入门2(屏幕添加汉字)

先在百度上下载.ttf的字体。下载链接:江城黑体 700W|字体下载(此链接不唯一)

 大约等待2分钟左右。如果不喜欢此字体,也可以下载别的字体。将下载好后的字体重命名(也可省略此步骤),本人下载的字体为黑体,重命名为黑体(字体文件可以有中文)。

LVGL之SquareLine Studio UI设计入门2(屏幕添加汉字)_第1张图片

 将下载后的字体复制到项目的assets文件夹里面。(本人新创建的项目项目在E盘lvgl_demo文件夹中。(E:\lvgl_demo))

LVGL之SquareLine Studio UI设计入门2(屏幕添加汉字)_第2张图片

LVGL之SquareLine Studio UI设计入门2(屏幕添加汉字)_第3张图片

 打开SquareLine Studio中新建的项目,在窗口的右边来设置字体。

LVGL之SquareLine Studio UI设计入门2(屏幕添加汉字)_第4张图片

 具体操作如下图所示。

LVGL之SquareLine Studio UI设计入门2(屏幕添加汉字)_第5张图片

 名称:可以默认,后续为了更好的分辨字体的大小以及分辨率,本人将名称改为Font16b4,含义为16号字体,Bpp为Bpp4。

Select font asset(字体选择):选择相应的字体即可(在此之前,一定要将字体复制到项目的assets文件夹中。

Font size(字体大小):用户设置字体的大小。

Bpp:可默认,也可设置Bpp1---Bpp4,屏幕越大,Bpp数值越小。反之越大。

Letters:默认即可。

Range:默认即可。

Symbols:添加需要输出的字库,如图所示,字库为“你好中国”。(若字库中没有相应文件,在屏幕中显示为乱码)。

Custom:默认即可。

以上操作只是是设置字库的过程。

在窗口的左边来给屏幕添加文字。

LVGL之SquareLine Studio UI设计入门2(屏幕添加汉字)_第6张图片

点击之后是以下的界面。

LVGL之SquareLine Studio UI设计入门2(屏幕添加汉字)_第7张图片

LVGL之SquareLine Studio UI设计入门2(屏幕添加汉字)_第8张图片如上图所示,先双击屏幕上的文本框,选择inspector选项,在Text中添加需要输入的文字。

LVGL之SquareLine Studio UI设计入门2(屏幕添加汉字)_第9张图片

 在Text中添加需要输入的文字之后(本次我输入的文字为:“你好小李”),依旧在inspector选项中的STYLE SETTINGS中Text Font打勾,并且选择之前保存好的字体库名称(Font16b4)。

LVGL之SquareLine Studio UI设计入门2(屏幕添加汉字)_第10张图片

通过屏幕可以看到,“你好”可以正常显示,而小李却显示乱码。遇到这种情况,只需要在字体库中添加相应的字体即可。如下所示。

LVGL之SquareLine Studio UI设计入门2(屏幕添加汉字)_第11张图片

点击右边设置字体选项(Font Manger),在CREATED FONTS中展开之前设置的字体库,可以看到以前只设置了“你好中国”。想要添加别的库,在其中继续添加即可。

LVGL之SquareLine Studio UI设计入门2(屏幕添加汉字)_第12张图片

 修改之后点击MODIFY即可。然后再点击inspector选项,乱码的字体便恢复正常。

LVGL之SquareLine Studio UI设计入门2(屏幕添加汉字)_第13张图片

你可能感兴趣的:(SquareLine,Studio,ui)