核心用法
Fonts 技能是一套面向前端开发者的系统性排版知识库，专注于解决网页字体选择、配对、渲染与可读性优化问题。核心模块包括：
1. 字体分类决策：明确区分 Display 字体（仅用于 24px+ 标题）与 Text 字体（12-18px 正文），避免装饰性字体误用于正文导致可读性灾难。
2. 科学配对方法：反对「相似即安全」的直觉，推荐通过字体类别对比（Serif + Sans-serif）或同一家族变体（如 Roboto + Roboto Slab）建立层次；严禁双装饰字体混用。
3. 跨平台渲染控制：Windows 平台避免 100-300 细体用于正文；深色模式需提升字重一档；禁用浏览器伪造的粗体/斜体，强制使用字体原生字重。
4. 微观排版细节：正文行高 1.4-1.6、标题 1.1-1.3；行长控制在 45-75 字符（max-width: 65ch）；全大写文本必须增加 0.05em 字间距；通过 text-wrap: balance/pretty 或手动干预消除孤字。
5. 性能优化实践：强制 font-display: swap 防止 FOIT（不可见文本闪烁）；WOFF2 为唯一必需格式；预加载关键字体；系统字体栈实现零加载延迟。
显著优点
- 权威来源整合：内容源自 Google Fonts 团队、CSS Working Group 规范及业界最佳实践（如 65ch 行长标准出自《The Elements of Typographic Style》网页适配版）。
- 可执行性强：每条建议附带具体 CSS 代码片段，从
font-variant: small-caps到 孤字修复，即插即用。 - 平台覆盖全面：针对 Windows 字体渲染差异（ClearType 抗锯齿特性）提供专门优化，弥补多数设计指南的 Mac-centric 偏见。
潜在局限
- 动态内容局限：未涉及可变字体（Variable Fonts）轴心控制、OpenType 高级特性（如连字、分数）的复杂场景。
- 无障碍深度不足：未涵盖色觉障碍用户的字体对比度计算、阅读障碍者（Dyslexia）专用字体建议。
- 非拉丁语系支持有限：子集化建议仅提及 Latin，对 CJK、阿拉伯语等复杂文字系统的优化方案缺失。
适合人群
- 前端工程师需快速建立排版决策框架
- UI 设计师寻求工程可落地的排版规范
- 独立开发者优化博客/产品着陆页可读性
常规风险
- 过度优化陷阱：严格遵循所有规则可能导致设计语言僵化，建议在实际项目中根据品牌调性灵活调整。
- 浏览器兼容差异：
text-wrap: pretty截至 2024 年仅 Chromium 内核支持，需设置降级方案。 - FOIT 残留风险：部分旧版浏览器
font-display: swap支持不佳，极端场景下仍可能出现不可接受的内容闪烁。