typography-pairing-debug

从现象、诱因到根因，系统定位「字体搭配」的常见故障，并给出可落地的修复与防复发方案。 **一、常见现象** 1. 文字显示模糊或锯齿明显 2. 中英文混排时视觉不协调（如间距不均、基线不对齐） 3. 字体在特定设备或浏览器中缺失或回退异常 4. 行高、字间距不合理导致阅读困难 5. 多语言环境下字体渲染不一致 **二、主要诱因** 1. 字体选择不当：未考虑中英文特性差异（如衬线/无衬线匹配） 2. 未设置合理的字体回退（font-family）链 3. 忽略系统默认字体差异（Windows/macOS/Linux/移动端） 4. 未针对高分辨率屏幕优化字体渲染（如未启用抗锯齿） 5. CSS 属性配置错误（如 line-height、letter-spacing 单位使用不当） **三、根因分析** 1. 缺乏统一的字体规范体系 2. 开发与设计协作断层：设计稿字体未在代码中准确还原 3. 未进行多平台、多浏览器兼容性测试 4. 对字体加载机制理解不足（如 FOIT/FOUT 问题） 5. 忽视用户自定义字体设置（如浏览器强制字体） **四、可落地修复方案** 1. 建立字体使用规范： - 明确中英文主副字体组合（如：中文用思源黑体，英文用 Inter） - 制定 font-family 回退链标准（示例：`"PingFang SC", "Helvetica Neue", Arial, sans-serif`） 2. 优化 CSS 配置： - 使用相对单位（如 `em`、`rem`）设置行高与字间距 - 添加 `font-smoothing: antialiased` 提升 Mac 端渲染效果 3. 实施字体加载策略： - 使用 `font-display: swap` 避免布局偏移 - 预加载关键字体（`<link rel="preload">`） 4. 设计-开发协同： - 在设计工具中标注字体使用规则 - 使用 Style Dictionary 等工具同步字体变量 **五、防复发机制** 1. 自动化检测： - 集成 Lighthouse 或 axe 工具检查字体可访问性 - 使用 Puppeteer 进行多平台截图比对 2. 建立字体资产库： - 集中管理授权字体文件 - 版本化字体资源（避免 CDN 缓存导致不一致） 3. 定期回归测试： - 覆盖主流设备矩阵（iOS/Android/Windows/macOS） - 模拟弱网环境验证字体加载降级表现 4. 文档沉淀： - 维护《字体使用指南》Wiki 页面 - 新成员入职培训中加入字体规范考核 > 关键原则：**一致性 > 美观性**。优先保障跨平台可读性，再追求视觉细节优化。

存档时间线

版本索引永久保留；内容副本只保留最新 1 份，更早版本仅留索引与哈希（存档时间线的证据链不会因此断裂）。

下载存档内容副本