展开本页目录
开始前准备什么
- Node.js与npm已可运行；练习只需本地文本文件和官方@google/design.md CLI，不需要Stitch账号或付费生成。
- 固定当前CLI版本并保留版本号；DESIGN.md仍为alpha格式，升级前先在练习副本复核。
- 本课给出作者自制规则文件和预期，不把预期JSON冒充已执行的官方CLI返回。
- 准备跨语言文字样本
- 填写完整字体token
- 核对字体取得方式
- 运行规范校验
- 渲染并读取实际样式
- 制造回退对照
- 交付排版契约
1. 准备跨语言文字样本
选一段中文说明、一行英文编号和相同宽度容器，保存原文不改字数。
本练习用自有产品说明，不用图片文字截图代替可选择文本。
2. 填写完整字体token
为body-md写fontFamily、fontSize、fontWeight与lineHeight，另列label样式。
只填fontFamily会留下其他排版默认值，先确定需要控制的属性。
3. 核对字体取得方式
记录本地安装或可合法分发的字体文件以及实际加载路径。
没有字体文件时保留系统回退，不宣称渲染就是设计稿指定字体。
官方界面与功能位置
以下为官方文档配图，具体版本与账号入口以当前产品为准。本课练习输入与验收对照见相邻步骤。
4. 运行规范校验
lint后查看字体数据是否进入解析状态，留意缺失typography提示。
字体名称合法并不证明浏览器已加载，这是两个检查层。
5. 渲染并读取实际样式
在作者HTML里检查computed font-family、font-size与line-height，并记录换行行数。
跨平台字形有差别时保存实际环境，不只量截图像素。
6. 制造回退对照
临时断开练习字体引用，仅在副本打开同一页面。
比较行数与标签溢出，再恢复字体，避免把回退差异错怪为AI改了文字。
7. 交付排版契约
保存字体token、字体来源、实际加载与回退截图和环境版本。
如果只做了本机检查，说明跨设备仍待验证，不承诺所有终端完全一致。
下载本课材料并开始操作
练习包包含本课的具体输入、可编辑数据、正反样例与七步说明。index.html 可离线查看原件和验收参考，actual-results.csv 用于记录你实际操作后的结果。
怎样确认已经完成
- 正文/标签的字体属性可在页面实际读回。
- 回退对照使用相同原文与容器宽度。
- 字体来源与未覆盖平台明确。
常见问题
DESIGN.md写了字体名，AI页面为什么还是另一种字？
为中文正文和英文标签填写字体族、字号、字重与行高，记录合法字体文件及实际加载路径。用固定宽度样本对照加载成功和回退换行；fontFamily 名字存在不代表机器已安装字体。
回退字体导致多出一行，要不要删短正文？
先保留原文找出字体、字号、行高或容器宽度差异。本课通过断开字体的负例确认原因，不通过删内容掩盖加载问题。