DESIGN.md字体规范:核对字体加载、行高与回退,不把fontFamily名字当已安装 素材身份:作者原创输入/可编辑参考。目标工具未在本轮执行。 先打开 index.html;input.csv 是原始字段,reference.csv 是验收基准,negative.csv 是故意构造的坏样例。 actual-results.csv 保留未测状态,实际执行后再填写。 前置条件: Node.js与npm已可运行;练习只需本地文本文件和官方@google/design.md CLI,不需要Stitch账号或付费生成。 固定当前CLI版本并保留版本号;DESIGN.md仍为alpha格式,升级前先在练习副本复核。 本课给出作者自制规则文件和预期,不把预期JSON冒充已执行的官方CLI返回。 操作步骤: 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、字体来源、实际加载与回退截图和环境版本。 如果只做了本机检查,说明跨设备仍待验证,不承诺所有终端完全一致。 验收: 正文/标签的字体属性可在页面实际读回。 回退对照使用相同原文与容器宽度。 字体来源与未覆盖平台明确。 官方资料: https://github.com/google-labs-code/design.md/blob/main/docs/spec.md 图片身份:assets/ 为内置image_gen生成的原创练习输入缩略版,原始文件保留在网站图片来源地址。可编辑SVG为作者原生排版。