核对字体加载、行高与回退，不把fontFamily名字当已安装

{
  "inputRows": [
    {
      "role": "body-md",
      "fontFamily": "Arial",
      "fontSize": "16px",
      "fontWeight": 400,
      "lineHeight": 1.6
    },
    {
      "role": "label",
      "fontFamily": "Arial",
      "fontSize": "12px",
      "fontWeight": 600,
      "text": "ITEM-018"
    },
    {
      "role": "container",
      "width": "320px",
      "text": "把今天的预约整理成清单。先确认时间，再选择位置。最后核对联系人。"
    }
  ],
  "referenceRows": [
    {
      "check": "same source text",
      "expected": "no content deletion"
    },
    {
      "check": "font loaded",
      "expected": "computed styles recorded"
    },
    {
      "check": "fallback run",
      "expected": "same width, changed font availability only"
    }
  ],
  "invalidRows": [
    {
      "action": "delete final sentence",
      "error": "hides wrapping mismatch"
    },
    {
      "fontFamily": "MissingFontOnly",
      "claim": "loaded",
      "error": "name alone not a loaded asset"
    }
  ],
  "notes": [
    "作者自制可编辑输入与验收参考，非官方CLI或云端返回。",
    "完整合法基础稿采用官方frontmatter schema；仅按本课故意更改对应字段。"
  ],
  "designMdTemplate": "---\nversion: alpha\nname: Field Kit\ncolors:\n  primary: \"#184A45\"\n  surface: \"#F7F4EC\"\ntypography:\n  body-md:\n    fontFamily: Arial\n    fontSize: 16px\n    fontWeight: 400\n    lineHeight: 1.6\nrounded:\n  sm: 8px\nspacing:\n  sm: 8px\ncomponents:\n  button-primary:\n    backgroundColor: \"{colors.primary}\"\n    textColor: \"#FFFFFF\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.sm}\"\n    padding: \"{spacing.sm}\"\n---\n## Overview\nField Kit的预约界面。\n## Colors\n主色用于主要操作。\n## Typography\n正文使用body-md。\n## Layout\n使用8px间距。\n## Shapes\n使用8px圆角。\n## Components\n主要按钮统一消费语义引用。\n",
  "officialSchemaUrl": "https://github.com/google-labs-code/design.md/blob/main/docs/spec.md",
  "files": {
    "input.json": "[\n  {\n    \"role\": \"body-md\",\n    \"fontFamily\": \"Arial\",\n    \"fontSize\": \"16px\",\n    \"fontWeight\": 400,\n    \"lineHeight\": 1.6\n  },\n  {\n    \"role\": \"label\",\n    \"fontFamily\": \"Arial\",\n    \"fontSize\": \"12px\",\n    \"fontWeight\": 600,\n    \"text\": \"ITEM-018\"\n  },\n  {\n    \"role\": \"container\",\n    \"width\": \"320px\",\n    \"text\": \"把今天的预约整理成清单。先确认时间，再选择位置。最后核对联系人。\"\n  }\n]\n",
    "reference.json": "{\n  \"identity\": \"作者验收参考，非模型返回\",\n  \"rows\": [\n    {\n      \"check\": \"same source text\",\n      \"expected\": \"no content deletion\"\n    },\n    {\n      \"check\": \"font loaded\",\n      \"expected\": \"computed styles recorded\"\n    },\n    {\n      \"check\": \"fallback run\",\n      \"expected\": \"same width, changed font availability only\"\n    }\n  ]\n}\n",
    "invalid.json": "{\n  \"identity\": \"作者构造负例，非实际错误回包\",\n  \"rows\": [\n    {\n      \"action\": \"delete final sentence\",\n      \"error\": \"hides wrapping mismatch\"\n    },\n    {\n      \"fontFamily\": \"MissingFontOnly\",\n      \"claim\": \"loaded\",\n      \"error\": \"name alone not a loaded asset\"\n    }\n  ]\n}\n",
    "case.md": "# DESIGN.md字体规范：核对字体加载、行高与回退，不把fontFamily名字当已安装\n\nDESIGN.md字体规范能告诉AI应该选什么字，但不能替电脑安装字体。本课保持同一段文字，逐项检查fontFamily、fontWeight和lineHeight进入实际页面后的效果，并标记回退字体。\n\n## 准备跨语言文字样本\n\n选一段中文说明、一行英文编号和相同宽度容器，保存原文不改字数。\n\n本练习用自有产品说明，不用图片文字截图代替可选择文本。\n\n## 填写完整字体token\n\n为body-md写fontFamily、fontSize、fontWeight与lineHeight，另列label样式。\n\n只填fontFamily会留下其他排版默认值，先确定需要控制的属性。\n\n## 核对字体取得方式\n\n记录本地安装或可合法分发的字体文件以及实际加载路径。\n\n没有字体文件时保留系统回退，不宣称渲染就是设计稿指定字体。\n\n## 运行规范校验\n\nlint后查看字体数据是否进入解析状态，留意缺失typography提示。\n\n字体名称合法并不证明浏览器已加载，这是两个检查层。\n\n## 渲染并读取实际样式\n\n在作者HTML里检查computed font-family、font-size与line-height，并记录换行行数。\n\n跨平台字形有差别时保存实际环境，不只量截图像素。\n\n## 制造回退对照\n\n临时断开练习字体引用，仅在副本打开同一页面。\n\n比较行数与标签溢出，再恢复字体，避免把回退差异错怪为AI改了文字。\n\n## 交付排版契约\n\n保存字体token、字体来源、实际加载与回退截图和环境版本。\n\n如果只做了本机检查，说明跨设备仍待验证，不承诺所有终端完全一致。\n\n身份：输入与参考为作者材料；localCli有实测记录时仅证明对应CLI运行，目标云端与模型推理未执行。\n",
    "DESIGN.md": "---\nversion: alpha\nname: Field Kit\ncolors:\n  primary: \"#184A45\"\n  surface: \"#F7F4EC\"\ntypography:\n  body-md:\n    fontFamily: Arial\n    fontSize: 16px\n    fontWeight: 400\n    lineHeight: 1.6\nrounded:\n  sm: 8px\nspacing:\n  sm: 8px\ncomponents:\n  button-primary:\n    backgroundColor: \"{colors.primary}\"\n    textColor: \"#FFFFFF\"\n    typography: \"{typography.body-md}\"\n    rounded: \"{rounded.sm}\"\n    padding: \"{spacing.sm}\"\n---\n## Overview\nField Kit的预约界面。\n## Colors\n主色用于主要操作。\n## Typography\n正文使用body-md。\n## Layout\n使用8px间距。\n## Shapes\n使用8px圆角。\n## Components\n主要按钮统一消费语义引用。\n",
    "typography.html": "<!doctype html><html lang=\"zh-CN\"><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"width=device-width,initial-scale=1\"><title>字体加载与回退</title><style>body{font:16px/1.6 Arial,sans-serif;background:#f7f4ec;color:#183b39;margin:32px;max-width:1100px}h1{font-size:32px}article{padding:24px;border:1px solid #cbd4cc;background:white;margin:16px 0}button{background:#184a45;color:white;padding:12px 20px;border:0;border-radius:8px}table{border-collapse:collapse;width:100%}th,td{padding:10px;border:1px solid #cbd4cc;text-align:left}pre{white-space:pre-wrap;overflow-wrap:anywhere}.sample{width:320px;font-family:Arial,sans-serif;font-size:16px;line-height:1.6}.sample small{font-size:12px;font-weight:600}</style><h1>相同原文与宽度</h1><article class=\"sample\">把今天的预约整理成清单。先确认时间，再选择位置。最后核对联系人。<br><small>ITEM-018</small></article></html>"
  }
}