PicoPixel

使用 LVGL 字体

了解 LVGL 字体为什么需要转换,如何使用内置或上传的字体,如何设置阿拉伯文、希伯来文等从右到左的文字,以及如何精简中日韩字体并清理未使用的字体。

EDEd
fontpicopixellvgl
已更新2026-05-29
01/07

概览

嵌入式设备使用字体的方式与电脑不同。本指南会先解释原因,再介绍如何在 PicoPixel 中创建字体:选择内置字体或上传自己的字体文件,设置阿拉伯文、希伯来文等从右到左的文字,并控制中日韩字体的文件大小。最后还会介绍如何一键清理试用后不再需要的字体。

PicoPixel 画布上的多语言标签,展示西里尔文、泰文、中文、希腊文、韩文、日文和阿拉伯文;左侧字体面板列出十个已加载字体,右侧显示标签属性
▸ PicoPixel 支持多种文字,每个标签都可以使用不同的语言和字体。
02/07

为什么需要转换字体?

电脑上的字体文件,例如 .ttf 和 .otf,通常用数学曲线描述字形。电脑有足够的性能和内存,可以按所需字号实时绘制这些曲线。

ESP32、智能手表芯片和小型显示控制器的资源有限,通常难以实时完成这些计算。因此,LVGL 采用了更轻量的方式:把字形预先绘制成固定尺寸的小图片,也就是位图,让设备直接使用。

PicoPixel 会完成这一步转换。创建字体时,它会读取原始字体文件,只提取所需字符和字号,并转换为 LVGL 使用的位图格式。

NOTE

转换后的 LVGL 字体采用固定字号。16 px 的字体放大到 32 px 后无法保持同样的清晰度。如果需要两种字号,就分别生成两种尺寸。下面的创建字体介绍了如何一次选择多个字号。

每多一个字符或字号,都会增加设备的存储开销。因此,精简字体的关键是只保留界面实际使用的字符和尺寸。

03/07

使用内置字体或上传自己的字体

创建字体时,有两种来源可选:

  • Bundled(内置字体):经过筛选和测试的常用字体,包括 Noto Sans、Roboto、Open Sans、Montserrat、Poppins、Inter、Lato、Nunito、Source Sans 3 等。没有特殊要求时,可以从这里选择。
  • Upload(上传):上传自己的 .ttf 或 .otf 文件。适合使用指定的品牌字体,或补充内置字体未覆盖的语言。
TIP

上传时尽量使用静态字体文件,例如 Roboto-Regular.ttf,而不是 Roboto-VariableFont.ttf 这样的可变字体文件。静态字体的转换通常更可靠,普通 .ttf 文件一般兼容性较好。

两种方式都支持实时预览。输入自己的文字,即可在创建前检查显示效果。

04/07

创建字体

打开 Create Font 面板,按以下步骤填写:

Create Font 面板中的 Bundled 标签:选中 Doto Regular,预览文字为 Hello World Test!,字号为 16 和 48,Letters 为 Standard,展开的 Advanced 区域显示 4 bpp、Ranges 和 Symbols 设置
▸ 选择字体、预览文字、一次生成多个字号,并按需调整像素位数和字符范围。
  1. 选择字体:在 Bundled 中选择字体及字重,例如 Regular 或 Bold;也可以切换到 Upload 上传文件。
  2. Font Name:填写字体在项目列表中显示的名称。使用多种字体时,清楚的命名更方便查找。
  3. Size (px):选择字号,单位为像素。可以同时选择多个尺寸,也可以点击 16、22、32 等常用预设。每个字号都会单独生成一份字体,请只选实际需要的尺寸。
  4. Letters:选择字符集,例如 Standard(基础英文)、Latin(拉丁文)、Greek(希腊文)、Cyrillic(西里尔文)、Hebrew(希伯来文)、Arabic(阿拉伯文)或 Thai(泰文)。
  5. Asian:中日韩文字的单独选项。这些字体需要特别处理,见下文的中日韩字体。

Advanced 区域提供更细的设置。Bits per Pixel 决定字形可用的灰度级数:数值越高,边缘越平滑,占用空间也越大;通常可以使用默认的 4 bpp。这里还可以手动填写字符范围和指定字符,大多数情况下无需调整其他高级设置。

TIP

每种字体支持的语言不同。如果预览里出现空方框,通常说明所选字体不包含对应字形。请改用支持该文字的内置字体,或上传合适的字体文件。选择并非所有字体都支持的文字时,PicoPixel 也会给出提醒。

05/07

从右到左的文字:阿拉伯文与希伯来文

阿拉伯文和希伯来文从右到左书写,需要相应的文字处理。你可以直接在 Create Font 面板中设置:

  1. 在 Letters 下拉菜单中选择 Arabic 或 Hebrew,让生成的字体包含对应字符集。基础英文字母也会保留,因此仍可显示数字和拉丁文字。
  2. PicoPixel 会推荐支持该文字的字体,例如 Noto Sans Arabic。请选择推荐字体或其他明确支持该文字的字体。
  3. 检查实时预览。若文字显示正常,即可继续;若出现空方框,请换用支持该文字的字体。
NOTE

阿拉伯文字母会随其在单词中的位置改变字形,整行文字也从右向左排列。导出时,PicoPixel 会检测阿拉伯文、波斯文或希伯来文,并启用对应的 LVGL 文字处理设置,帮助文字在设备上正确显示,无需你手动查找配置。

WARNING

创建字体时就要在 Letters 中选择正确的文字类型。如果先创建只含普通拉丁字符的字体,之后再输入从右到左的文字,所需字形不会凭空加入;请重新生成包含对应字符的字体。

06/07

中日韩字体

CJK Font Setup 对话框说明中日韩字体包含数千个字符,提示将界面文字粘贴到 Symbols 字段,并介绍兼容字体选择、从 Google Fonts 下载字体以及为新增字符创建字体的方法
▸ 选择中日韩语言时,CJK Font Setup 会引导你只包含所需字符,控制字体大小。

CJK 是中文、日文和韩文的常用合称。这些文字的字符数量很大:韩文约有 11,000 个字符,中文则超过 20,000 个。每个字形都要预先绘制并存储,完整字体可能占用数 MB,超出许多嵌入式设备的容量。

解决方法是只包含界面实际使用的字符。一个常见界面可能只用到一百多个不同字符,所需空间会小得多。

  1. 在 Asian 下拉菜单中选择 Korean、Chinese 或 Japanese。
  2. 在 Advanced 区域找到 Symbols 字段,粘贴界面会显示的全部文字,包括标签、按钮和提示消息。PicoPixel 只会生成这些字符的字形。字段会预填所选语言的常用界面词,例如“设置”“确认”“取消”,请在此基础上补全自己的文字。

这样,原本可能占数 MB 的字体就有机会缩小到几百 KB。

WARNING

只有 Symbols 中列出的字符才会包含在字体中。界面若显示了未加入的字符,就会出现空方框。修改文案后,记得更新 Symbols 并重新创建字体。

TIP

对于中日韩文字,上传自己选定的字体可以更好地控制显示效果。请粘贴最终版的完整界面文案,避免漏字。

Advanced 区域选择了 Korean,Symbols 字段中填入设置、确认、取消、编辑、搜索等韩文界面文字
▸ 将界面会显示的所有文字粘贴到 Symbols,生成的字体只包含这些字符。
07/07

清理未使用的字体

试字号时,很容易留下不再需要的字体。例如同时创建了 16 px 和 22 px,最后只使用其中一种,另一种就可以删除。

在资源面板的 Fonts 区域点击 Delete Unused Fonts。PicoPixel 会检查项目中的所有控件,找出没有被引用的字体并一并删除,帮助你精简资源。

TIP

可以先创建几种字号,比较效果后再用 Delete Unused Fonts 清理。列表会显示每份字体的字号和质量设置,方便核对。

NOTE

此功能只删除没有控件引用的字体,不会改变现有设计。也可以右键点击某个字体单独删除;误删后使用撤销即可恢复。

继续阅读

接着学点什么

如何在 PicoPixel 中使用宠物 thumbnail
PICOPIXEL

如何在 PicoPixel 中使用宠物

宠物是预制的动画精灵,包含多种动画模式,可根据设定的条件切换。从目录中选一个,添加到项目中,然后将其连接起来,让它对设备正在做的任何事情做出反应:获取数据、过热、代码审查等等。

pets · sprites · picopixel
如何使用 PicoPixel 模板、UI 套件和完整应用 thumbnail
PICOPIXEL

如何使用 PicoPixel 模板、UI 套件和完整应用

查找 PicoPixel 模板、UI 套件、示例、精灵、控件和完整应用,了解如何打开、下载、导入和修改项目,并导出用于设备的 LVGL C 代码。

templates · ui-kits · full-apps
PicoPixel LVGL MCP Server Setup Guide thumbnail
PICOPIXEL

PicoPixel LVGL MCP Server Setup Guide

Set up the PicoPixel LVGL MCP server for Claude, ChatGPT, Codex, or Cursor. Learn agent settings, reusable components, colors, fonts, and assets.

LVGL MCP · MCP server setup · AI UI design