用途:用于网页字体选择、字体搭配、建立排版比例、设置行高与行长、实现流体排版,或审查现有排版质量。
主要能力与规则:每项目最多 2-3 个字族,正文与标题最多 2 个,第三个仅作点缀;优先可变字体与自托管 WOFF2(GDPR 考虑,不用 Google Fonts CDN);校验字符集覆盖(如变音符号)。搭配上强调对比,如衬线标题配无衬线正文,并匹配相近 x-height。字号使用 Major Third(1.250)或 Perfect Fourth(1.333)比例,正文至少 16px(推荐 18px),标题移动端至少 24px、桌面至少 32px,可用 clamp() 实现流体尺寸,如 font-size: clamp(1rem, 2.5vw, 2rem)。正文行高 1.5-1.75,标题 1.1-1.3,行长 45-75 字符(最佳 65),可用 max-width: 65ch。强调用 600-700 字重而非下划线或全大写;两端对齐仅在启用 hyphens: auto 时使用;标题可用 text-wrap: balance。性能上使用 WOFF2、font-display: swap、预加载主字体,并按需子集化,加载字体文件不超过 4 个。
使用方式:按上述规则在 CSS 中设置字体、比例、行高、行长与 clamp(),并对照清单逐项检查。
适用场景:品牌网站、编辑类长文、响应式界面等需要清晰层级与可读文本的网页。
限制:资料未提供具体安装命令、代码库结构或工具集成方式;规则为设计指导,实际效果需在真实设备上验证。