字体
字族
| 风格 | 界面(ui) | 标题(display) | 数字(data) |
|---|---|---|---|
| 青藤 | Inter → 系统黑体 | 同界面 | Inter(等宽数字) |
| 萌虎 | Fredoka → 系统圆体 → 系统黑体 | 同界面 | Fredoka |
| 像素 | JetBrains Mono → 系统黑体 | Silkscreen(只用于英文和数字)→ JetBrains Mono | JetBrains Mono |
- 西文字体 Inter、Fredoka、JetBrains Mono、Silkscreen 都是 SIL OFL 1.1 协议,可以打包进 MIT 协议的客户端,要随包附上 OFL 许可文本。Web 端从 Google Fonts 加载,或者自托管 woff2。
- 品牌字体只负责拉丁字母。中文、日文、韩文、印地文、泰文、阿拉伯文等交给系统字体,不打包。字体栈的顺序是:品牌字体 → 界面语言那一组的系统字体 → 其余各组 → emoji →
system-ui→ 通用字族。简体中文界面里,「系统黑体」就是 macOS 的苹方、Windows 的微软雅黑、Android 和 Linux 的思源黑体(Noto Sans CJK SC)。各语言的名单、萌虎圆体、像素风格遇到中文怎么办,见「多语言与从右往左」。 - Fredoka 和 Silkscreen 缺土耳其文、越南文、西里尔字母等字母。界面是这些语言时,萌虎整体换成 Inter,像素的标题和计时器整体换成 JetBrains Mono,不在一个词里混用两种字体。
- 不要给中文用合成粗体或斜体。萌虎的粗体中文依赖系统字体自带的 Semibold 字重。
字号阶梯
每种风格六级,名字相同,数值不同。组件只引用名字:Web 用 var(--type-task),Flutter 用 textTheme.bodyLarge。
| 名称 | 用途 | Flutter | 青藤 | 萌虎 | 像素 |
|---|---|---|---|---|---|
title |
页面、项目标题 | headlineSmall |
22 / 28 · 700 | 32 / 38 · 700 | 22 / 30 · 700 |
heading |
分组、区块标题 | titleMedium |
15 / 22 · 600 | 17 / 24 · 700 | 11 / 16 · Silkscreen |
task |
任务标题、按钮 | bodyLarge |
14 / 20 · 500 | 16 / 22 · 600 | 13 / 20 · 500 |
body |
描述、评论、正文 | bodyMedium |
14 / 22 · 400 | 15 / 22 · 500 | 13 / 20 · 400 |
caption |
元信息、标签、计数 | labelMedium / bodySmall |
12 / 16 · 500 | 13 / 18 · 600 | 12 / 16 · 400 |
timer |
计时器数字 | displaySmall |
26 / 30 · 700 | 40 / 44 · 700 | 24 / 28 · Silkscreen |
格式为「字号 / 行高 · 字重」,单位 px。
规则
- 中文正文行高不低于 1.45;
body在三种风格里都满足。 - 天城文、孟加拉文、泰文、阿拉伯文、越南文有各自的行高下限(1.45 到 1.75 倍字号),由
--leading-min和BiScript.leadingMin自动抬高,不需要组件处理。 - 编号、时间、计时、计数一律用等宽数字(
font-variant-numeric: tabular-nums),列表里的日期才能对齐。 - 任务标题单行省略,详情页里完整换行。标题省略时,列表行的
title属性或无障碍标签里要有全文。 - 正文行宽控制在 40 个汉字左右(约 640px)。详情面板的描述区设
max-width。 - 全大写只用于像素风格的英文分组标题和字标,配合 0.06em 字距。中日韩、天城文、孟加拉文、泰文、阿拉伯文界面里字距一律归零(
--tracking-scale),阿拉伯文和天城文加了字距会把连笔和顶线断开。