概览
嵌入式设备上的 fonts 和电脑上的 fonts 不太一样。本指南先说明原因,然后带你在 PicoPixel 中创建 fonts:从选择 bundled font 或上传自己的 font,到处理 Arabic 和 Hebrew 等 right-to-left languages,再到控制 Chinese、Japanese 和 Korean 使用的超大 fonts。最后,我们会介绍一个方便的清理功能,适合你试验过很多 fonts 之后使用。
为什么 fonts 需要转换?
在笔记本电脑上,font file(如 .ttf 或 .otf)会把每个字母描述为一组数学曲线。电脑有足够的性能和内存,可以在你需要的任何大小下平滑绘制这些曲线。
小设备(ESP32、smartwatch chip、小型 display controller)通常做不到。它没有足够内存或处理能力即时重绘曲线。因此 LVGL 使用另一种方法:它不存储曲线,而是把每个字母以固定尺寸存成一张预先绘制的小图片(bitmap)。这对设备来说轻得多。
PicoPixel 会为你完成转换。创建 font 时,我们会获取原始 font file,并把它转换成 LVGL 需要的 bitmap format,只选取你需要的 letters 和 sizes。
因为每个字母都以固定尺寸预先绘制,转换后的 LVGL font 会锁定在你选择的大小。16px font 不能被拉伸到 32px 后仍保持清晰。如果你需要两种尺寸的文字,就要以两种尺寸创建 font(见下面的 Creating a font,可以一次选择多个 sizes)。
这也是 fonts 在设备上有真实成本的原因:每个字母、每个尺寸都会占用一点内存。本指南大部分内容都关于如何降低这个成本,只包含你实际使用的 characters 和 sizes。
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 不覆盖某种语言时使用。
如果上传自己的 font,请使用 static font file(例如 Roboto-Regular.ttf),而不是 "variable" font file(如 Roboto-VariableFont.ttf)。static files 转换可靠得多。普通 .ttf 文件通常效果最好。
无论选择哪一种,都有 live preview,你可以输入自己的文字,在创建前准确查看效果。
创建 font
打开 Create Font panel,你会看到一个简短表单。各部分作用如下:
- Pick your font,选择 Bundled font(及其 weight,如 Regular 或 Bold),或切换到 Upload tab 并选择自己的文件。
- Font Name,在项目 font list 中显示的名称。请起一个容易记住的名字,尤其是你会有多个 font 时。
- Size (px),font 的 pixel size。你可以一次选择多个尺寸(16、22、32 等常用 presets 一点即可)。记住每个 size 都会单独生成,所以只选择真正会用的尺寸。
- Letters,选择要包含的 character set:Standard(basic English)、Latin、Greek、Cyrillic、Hebrew、Arabic、Thai 等。这是告诉 PicoPixel 你需要哪种语言字母的方式。
- Asian,Chinese、Japanese 和 Korean 的单独选项。它们需要特殊处理,见下面的 its own section。
还有一个用于微调的 Advanced 区域,包括 Bits per Pixel(每个字母使用多少灰度层级,越高越平滑但占空间更多;4 是不错的默认值),以及手动指定 exact character ranges 或 symbols 的 fields。大多数人不需要碰这些。
并不是每个 font 都包含每种语言。如果你选择 non-Latin script,preview 显示空方块而不是字母,说明该 font 不覆盖它。请切换到为该 script 设计的 Bundled font,或上传支持它的 font。当你选择并非所有 fonts 都支持的 script 时,PicoPixel 会提醒你。
Right-to-left scripts:Arabic & Hebrew
Arabic 和 Hebrew 等语言从右到左阅读,字母也需要特殊处理。好消息是你可以直接在 Create Font panel 中设置,无需手动配置。
- 在 Letters dropdown 中选择 Arabic 或 Hebrew。这是关键步骤:它告诉 PicoPixel 包含该 script 的正确 character set(basic English letters 也会一起包含,因此 numbers 和 Latin text 仍可使用)。
- PicoPixel 会推荐为该 script 构建的 font,例如 Noto Sans Arabic。请使用推荐项(或其他 script-aware font),而不是不含这些字母的普通 Latin font。
- 检查 live preview。如果字母在那里正确渲染,就可以了。如果看到方块,说明所选 font 不支持该 script,请换一个。
Arabic letters 会根据在单词中的位置改变形状,整行也从右到左流动。导出项目时,PicoPixel 会自动检测你使用了 Arabic、Persian 或 Hebrew text,并开启 LVGL 中用于连接字形的匹配设置,因此你不需要翻配置文件就能让它在设备上正确显示。
关键点是:创建 font 时在 Letters dropdown 中选择 Arabic 或 Hebrew,才会把这些 characters 包含进来。如果先创建普通 font,之后才添加 right-to-left text,那些字母不会存在;请从一开始就用正确 script 创建 font。
Chinese, Japanese & Korean
CJK 是 Chinese、Japanese 和 Korean 的常用缩写。这些语言很特殊,因为它们有大量 characters:Korean 大约 11,000 个,Chinese 超过 20,000 个。记住每个 character 都会预先绘制并存储在设备上。包含完整 CJK font 可能增加数 MB,大多数嵌入式设备根本放不下。
解决方案是只包含实际使用的 characters。典型界面可能只显示一百来个不同 characters,相比之下非常小。
做法如下:
- 在 Asian dropdown 中选择 Korean、Chinese 或 Japanese。
- 找到 Symbols field(在 Advanced 区域),并粘贴界面实际会显示的文字,包括每个 label、button 和 message。PicoPixel 只会为其中找到的每个 character 包含 glyph。
- 为了帮你开始,PicoPixel 会用所选语言的常见界面词预填该 field(如 "Settings"、"Confirm"、"Cancel" 等)。请继续添加自己的文字。
这样,一个本来可能有数 MB 的 font,最终可能只有几百 KB。
只有列在 Symbols 中的 characters 会被包含。如果你的界面之后显示了没有添加的 character,它会显示为空方块。文字变更时,请回来更新 Symbols field,并重新创建 font。
对 CJK 来说,上传你明确想使用的 font(而不是依赖通用 font)会给你最多控制;粘贴完整、最终版界面文本可以避免遗漏。
清理:删除未使用 fonts
Fonts 会占空间,试验时很容易累积不再需要的 fonts。例如你不确定 16px 还是 22px 更好,于是两个都创建并试用。一旦决定,另一个就是 dead weight。
PicoPixel 让这件事很轻松。在 assets 的 Fonts 区域中,有一个 Delete Unused Fonts 按钮。它会扫描项目中的每个 widget,找出没有任何内容实际使用的 fonts,并一键删除,这样你可以清理残留,只为需要的 fonts 留空间。
这是试验尺寸的简单方式。创建几个 sizes,看看哪个最适合你的设计,然后点击 Delete Unused Fonts 清理其余部分。列表中的每个 font 都会显示 size 和 quality settings,因此很容易一眼看清你有哪些。
"Delete Unused Fonts" 只会删除没有 widget 引用的 fonts,因此设计不会改变。你也可以在列表中右键单个 font 自行删除。如果误删,undo 会立刻恢复。