用途:指导网页项目中的字体选择、配对与实现,让排版服务于内容可读性而非吸引注意。
主要能力:讲解阅读机制(扫视、注视、词形识别、易辨性与可读性区别);字体质量评估(字重一致性、字距对、字符集、x 高度、开放式字腔、真实内容测试);字体选择(先定用途再选造型,正文衬线/无衬线起点如 Georgia、Source Serif Pro、Inter、IBM Plex Sans);字体配对(最多一到两款,靠结构、字重、年代、宽度制造清晰对比,或使用同一家族的字重变化);排版度量(正文至少 16px,行长 45-75 字符、66 最佳,行高正文 1.4-1.8、标题 1.1-1.25);层级构建(大小、字重、颜色三杠杆,相邻层级只变一到两个,通过眯眼测试);响应式排版与性能(clamp() 流体字号,font-display: swap,预加载关键字体,子集化,总字体体积控制在 200KB 以下,优先 WOFF2 与可变字体)。
使用方式:按指南中的评分标准对排版实现打 0-10 分,并指出达到 10/10 所需的具体改进;使用提供的诊断清单逐项核对。示例:.prose { font-size: 1.125rem; line-height: 1.6; max-width: 65ch; };h1 { font-size: clamp(2rem, 1.5rem + 2vw, 3.5rem); };@font-face { font-family: 'Custom Font'; src: url('/fonts/custom.woff2') format('woff2'); font-display: swap; }。
适用场景:长文内容、仪表盘界面、移动端阅读、文档、电商、多语言产品、无障碍优先项目。
限制:包含字体许可验证与无障碍要求(200% 缩放可用、链接可辨识、标题无孤词)等约束;参考资料文件与延伸阅读书目按原文列出,具体授权价格与平台支持情况暂未提供。