3. 🔤 排版 Typography ★★☆☆☆

🌏 Web 网页规范

  • 字体加载: WOFF2 字体包 / Google Fonts CDN
  • 行高间距: `line-height` 常设为 1.5 - 1.8 相对行高
  • 自适应字号: `clamp()` / `vw` 流式自适应字号
  • 抗锯齿属性: `-webkit-font-smoothing` 优化渲染

📱 App 移动端规范

  • 字体加载: 预装系统字（SF Pro / Roboto）
  • 行高间距: 平台特定 Line Spacing (以 pt/dp 为硬基准)
  • 自适应字号: 动态类型 (Dynamic Type) 随系统缩放
  • 抗锯齿属性: 系统级高精度光栅化与像素对齐渲染

Web 字体渲染、流式响应字号与行宽阈值

Web Font Families, Fluid Font-size & Line Width

网页端采用首选系统字体的 Fallback 字体栈，利用 CSS clamp() 实现流式响应字号，并限制文字行宽在 600px - 700px 之间以保证大屏舒适阅读。

App 平台原生字型、动态字号与可读性

App Native Fonts, Dynamic Type & Typography Scales

App 端采用平台专属原生字型（iOS San Francisco / Android Roboto），必须完美接入系统的 动态字号 (Dynamic Type) 缩放级别，确保系统设置调整大字号时界面自动缩放对准。

LIVE PLAYGROUND: 优秀排版对比与 `clamp()` 流化效果 拖动改变视图大小，观察优秀案例中字号流畅缩放
https://web.meta-ui.edu/typography
09:41
📶 🔋
✓ 优秀排版 (Good)

流动式字号 h4 (Plus Jakarta Sans)

这里的段落行高为 1.65。文字间有呼吸感，呈现明确的视觉阶梯，字间距也经过微妙压缩。

✗ 糟糕排版 (Bad)

拥挤行高正文字体

行高仅为1.0。所有文字都挤在一起没有层级，字族缺失，极其难以卒读，丧失阅读兴趣。

📋 大模型统一 Prompt (LLM Prompt)