网页字体排版系统

网页文本常被低估

页面性能瓶颈往往来自字体文件而非脚本。未经优化的 @font-face 规则会阻塞渲染、拖慢首次内容绘制；随意堆砌的字体族则让视觉层次崩塌，用户扫一眼就跳走。很多团队把排版当作"设计收尾"，结果正文在手机上小得难以阅读，标题和正文的对比度形同虚设。这套技能的目标就是把这些细节纳入工程化管控。

它如何工作

字体选择与配对

遵循"少即是多"的原则，每项目最多 2–3 个字体族，正文与标题各司其职。衬线体配无衬线体是经典对比方案——例如 Playfair Display 配 Source Sans Pro，或 Poppins 配 Inter。关键是让两者的 x-height 接近，视觉上才协调。字符集覆盖范围必须验证，德语内容的 umlauts 等特殊字符不能漏。

比例尺与流体排版

正文至少 16px（移动端优选 18px），标题在移动端不低于 24px、桌面端不低于 32px。推荐使用 Major Third（1.250）或 Perfect Fourth（1.333）比例尺生成标题层级。所有字号层级用 clamp() 包裹，例如 clamp(1rem, 2.5vw, 2rem)，即可避免为字号写媒体查询断点，实现真正的流体排版。

行高与行宽

正文行高控制在 1.5–1.75，标题行高 1.1–1.3。单行字符数建议 45–75 个（最优 65），用 max-width: 65ch 即可实现。两端对齐只允许配合 hyphens: auto 使用，否则优先用左对齐。标题强调用 font-weight: 600-700，不要用下划线——在网页上 underline 永远意味着链接。

性能优化

字体文件统一用 WOFF2 格式，配合 font-display: swap 避免阻塞渲染。主字体应通过 <link rel="preload"> 预加载。只涉及拉丁字符时做子集化，可节省 60–80% 体积。单页加载的字体文件（含字重变体）不应超过 4 个。自托管优于 Google Fonts CDN，以符合 GDPR 要求。

规避常见陷阱

避免以下反模式：超过 3 个字体族、正文低于 16px、标题与正文之间缺乏层次、浅灰文字在白底上对比度不足（正文至少 4.5:1）。技术博客排版中常见的"文字墙"问题，可通过每 2–3 段插入小标题、使用列表和引用块来打破节奏。

适用边界

这套技能是设计决策指南，不是自动化工具。它不会替你安装字体文件、修改系统权限或执行任何外部写入操作。涉及发送、发布、付款、部署等敏感动作时，会先展示目标与影响并等待你确认。所有命令和代码片段默认仅供参考，只有在你明确要求且目标范围清晰时才会执行。

获取使用帮助和更多实用 Skill，请关注公众号「简诗 AI」，或在 SkillHub 搜索「简诗 AI」