PicoPixel

使用 fonts

了解为什么 LVGL fonts 需要转换,如何从 bundled 或 uploaded font 创建 font,如何设置 Arabic 和 Hebrew 等 right-to-left scripts,处理大型 CJK fonts,并清理未使用的 fonts。

ED Ed
font picopixel lvgl
已更新 2026-05-29
01 /07

概览

嵌入式设备上的 fonts 和电脑上的 fonts 不太一样。本指南先说明原因,然后带你在 PicoPixel 中创建 fonts:从选择 bundled font 或上传自己的 font,到处理 Arabic 和 Hebrew 等 right-to-left languages,再到控制 Chinese、Japanese 和 Korean 使用的超大 fonts。最后,我们会介绍一个方便的清理功能,适合你试验过很多 fonts 之后使用。

PicoPixel 编辑器画布显示 Cyrillic、Thai、Chinese、Greek、Korean、Japanese 和 Arabic scripts 的多语言 label widgets,左侧 fonts panel 列出十个 loaded fonts,右侧显示 label properties
▸ PicoPixel 支持多种 scripts — 每个 label 都使用不同的 font 和 language。
02 /07

为什么 fonts 需要转换?

在笔记本电脑上,font file(如 .ttf.otf)会把每个字母描述为一组数学曲线。电脑有足够的性能和内存,可以在你需要的任何大小下平滑绘制这些曲线。

小设备(ESP32、smartwatch chip、小型 display controller)通常做不到。它没有足够内存或处理能力即时重绘曲线。因此 LVGL 使用另一种方法:它不存储曲线,而是把每个字母以固定尺寸存成一张预先绘制的小图片(bitmap)。这对设备来说轻得多。

PicoPixel 会为你完成转换。创建 font 时,我们会获取原始 font file,并把它转换成 LVGL 需要的 bitmap format,只选取你需要的 letters 和 sizes。

NOTE

因为每个字母都以固定尺寸预先绘制,转换后的 LVGL font 会锁定在你选择的大小。16px font 不能被拉伸到 32px 后仍保持清晰。如果你需要两种尺寸的文字,就要以两种尺寸创建 font(见下面的 Creating a font,可以一次选择多个 sizes)。

这也是 fonts 在设备上有真实成本的原因:每个字母、每个尺寸都会占用一点内存。本指南大部分内容都关于如何降低这个成本,只包含你实际使用的 characters 和 sizes。

03 /07

Bundled fonts 和你自己的 fonts

创建 font 时有两个起点:

  • Bundled,一组精选、流行且经过测试的 fonts,可直接使用:Noto Sans、Roboto、Open Sans、Montserrat、Poppins、Inter、Lato、Nunito、Source Sans 3 等。这是安全且很好的默认选择。
  • Upload,带入你自己的 .ttf.otf 文件。当你有特定 brand font,或 bundled fonts 不覆盖某种语言时使用。
TIP

如果上传自己的 font,请使用 static font file(例如 Roboto-Regular.ttf),而不是 "variable" font file(如 Roboto-VariableFont.ttf)。static files 转换可靠得多。普通 .ttf 文件通常效果最好。

无论选择哪一种,都有 live preview,你可以输入自己的文字,在创建前准确查看效果。

04 /07

创建 font

打开 Create Font panel,你会看到一个简短表单。各部分作用如下:

PicoPixel Create Font panel 中 Bundled tab 处于 active,选中 Doto Regular font,live preview 显示 Hello World Test!,选择 sizes 16 和 48,Letters 设为 Standard,Advanced section 展开并显示 Bits per Pixel 为 4 bpp、Ranges 和 Symbols fields
▸ Create Font panel:选择 bundled font,预览文字,一次选择多个 sizes,并微调 bits per pixel 和 character ranges 等 advanced settings。
  1. Pick your font,选择 Bundled font(及其 weight,如 Regular 或 Bold),或切换到 Upload tab 并选择自己的文件。
  2. Font Name,在项目 font list 中显示的名称。请起一个容易记住的名字,尤其是你会有多个 font 时。
  3. Size (px),font 的 pixel size。你可以一次选择多个尺寸(16、22、32 等常用 presets 一点即可)。记住每个 size 都会单独生成,所以只选择真正会用的尺寸。
  4. Letters,选择要包含的 character set:Standard(basic English)、Latin、Greek、Cyrillic、Hebrew、Arabic、Thai 等。这是告诉 PicoPixel 你需要哪种语言字母的方式。
  5. Asian,Chinese、Japanese 和 Korean 的单独选项。它们需要特殊处理,见下面的 its own section

还有一个用于微调的 Advanced 区域,包括 Bits per Pixel(每个字母使用多少灰度层级,越高越平滑但占空间更多;4 是不错的默认值),以及手动指定 exact character ranges 或 symbols 的 fields。大多数人不需要碰这些。

TIP

并不是每个 font 都包含每种语言。如果你选择 non-Latin script,preview 显示空方块而不是字母,说明该 font 不覆盖它。请切换到为该 script 设计的 Bundled font,或上传支持它的 font。当你选择并非所有 fonts 都支持的 script 时,PicoPixel 会提醒你。

05 /07

Right-to-left scripts:Arabic & Hebrew

Arabic 和 Hebrew 等语言从右到左阅读,字母也需要特殊处理。好消息是你可以直接在 Create Font panel 中设置,无需手动配置。

  1. Letters dropdown 中选择 ArabicHebrew。这是关键步骤:它告诉 PicoPixel 包含该 script 的正确 character set(basic English letters 也会一起包含,因此 numbers 和 Latin text 仍可使用)。
  2. PicoPixel 会推荐为该 script 构建的 font,例如 Noto Sans Arabic。请使用推荐项(或其他 script-aware font),而不是不含这些字母的普通 Latin font。
  3. 检查 live preview。如果字母在那里正确渲染,就可以了。如果看到方块,说明所选 font 不支持该 script,请换一个。
NOTE

Arabic letters 会根据在单词中的位置改变形状,整行也从右到左流动。导出项目时,PicoPixel 会自动检测你使用了 Arabic、Persian 或 Hebrew text,并开启 LVGL 中用于连接字形的匹配设置,因此你不需要翻配置文件就能让它在设备上正确显示。

WARNING

关键点是:创建 font 时在 Letters dropdown 中选择 ArabicHebrew,才会把这些 characters 包含进来。如果先创建普通 font,之后才添加 right-to-left text,那些字母不会存在;请从一开始就用正确 script 创建 font。

06 /07

Chinese, Japanese & Korean

PicoPixel CJK Font Setup dialog 说明 CJK fonts 包含数千个 characters,并且只会包含指定 characters,包含将 UI text 粘贴到 Symbols field、自动选择兼容 fonts、从 Google Fonts 下载,以及为更多 characters 创建 additional fonts 的 tips
▸ 选择 Asian language 时会出现 CJK Font Setup guide,带你完成控制 font size 的关键步骤。

CJK 是 Chinese、Japanese 和 Korean 的常用缩写。这些语言很特殊,因为它们有大量 characters:Korean 大约 11,000 个,Chinese 超过 20,000 个。记住每个 character 都会预先绘制并存储在设备上。包含完整 CJK font 可能增加数 MB,大多数嵌入式设备根本放不下。

解决方案是只包含实际使用的 characters。典型界面可能只显示一百来个不同 characters,相比之下非常小。

做法如下:

  1. Asian dropdown 中选择 KoreanChineseJapanese
  2. 找到 Symbols field(在 Advanced 区域),并粘贴界面实际会显示的文字,包括每个 label、button 和 message。PicoPixel 只会为其中找到的每个 character 包含 glyph。
    • 为了帮你开始,PicoPixel 会用所选语言的常见界面词预填该 field(如 "Settings"、"Confirm"、"Cancel" 等)。请继续添加自己的文字。

这样,一个本来可能有数 MB 的 font,最终可能只有几百 KB。

WARNING

只有列在 Symbols 中的 characters 会被包含。如果你的界面之后显示了没有添加的 character,它会显示为空方块。文字变更时,请回来更新 Symbols field,并重新创建 font。

TIP

对 CJK 来说,上传你明确想使用的 font(而不是依赖通用 font)会给你最多控制;粘贴完整、最终版界面文本可以避免遗漏。

PicoPixel Advanced section 中选择 Korean,Symbols field 填入 settings、confirm、cancel、edit、search 等 Korean UI text,因此 font 只包含这些 characters
▸ 把界面显示的每一段文字粘贴到 Symbols field — 只有这些 characters 会被烘进 font。
07 /07

清理:删除未使用 fonts

Fonts 会占空间,试验时很容易累积不再需要的 fonts。例如你不确定 16px 还是 22px 更好,于是两个都创建并试用。一旦决定,另一个就是 dead weight。

PicoPixel 让这件事很轻松。在 assets 的 Fonts 区域中,有一个 Delete Unused Fonts 按钮。它会扫描项目中的每个 widget,找出没有任何内容实际使用的 fonts,并一键删除,这样你可以清理残留,只为需要的 fonts 留空间。

TIP

这是试验尺寸的简单方式。创建几个 sizes,看看哪个最适合你的设计,然后点击 Delete Unused Fonts 清理其余部分。列表中的每个 font 都会显示 size 和 quality settings,因此很容易一眼看清你有哪些。

NOTE

"Delete Unused Fonts" 只会删除没有 widget 引用的 fonts,因此设计不会改变。你也可以在列表中右键单个 font 自行删除。如果误删,undo 会立刻恢复。

继续阅读

继续前进。

如何在 PicoPixel 中使用宠物 thumbnail
PICOPIXEL

如何在 PicoPixel 中使用宠物

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

pets · sprites · picopixel
如何使用 PicoPixel templates、UI kits 和 full apps thumbnail
PICOPIXEL

如何使用 PicoPixel templates、UI kits 和 full apps

查找 PicoPixel templates、UI kits、examples、sprites、widgets 和 full app files,然后打开、下载、导入、自定义,并将它们导出为适用于设备的 LVGL C code。

templates · ui-kits · full-apps
什么是 sprite? thumbnail
PICOPIXEL

什么是 sprite?

了解 sprite 是什么,如何创建多状态 animated widgets,以及如何在项目之间复用它们。

sprite · picopixel