SuperAPI AI 工具集

better-typography

设计与创作

查看项目

更新于 10-15 17:26

技能介绍

用途:这是一份网页排版的实践技能,用于在构建或审查任何包含文字的内容时应用排版原则,避免一次性的字体尺寸与随手调整。

主要能力:涵盖字体选择(字体类别、搭配、格式、字形解剖)、可变字体与 OpenType(轴、字重、表格数字、风格集)、间距与尺寸(字号阶梯、标题层级、行高、字距、文本裁剪)、换行与标点(行宽、换行、截断、智能标点、RTL)、细节与可访问性(下划线、选区、表单、装饰文字、对比度),并提供覆盖所有属性的 CSS 速查表及对应 Tailwind 写法。

核心做法:网页使用 .woff2;优先用 CSS 属性而非原始特性标记(如用 font-weight 而非 font-variation-settings 的 wght);加载设计真正用到的字重与样式,谨慎设置 font-synthesis: none;字体、字号、字重尽量少,搭配求对比而非近似;用带语义命名的字号阶梯,标题尺寸随层级下降;行高按角色设定(标题约 1.1,正文 1.5–1.6,用无单位值);大标题可负字距、小号大写标签可正字距;长文行宽保持约 60–75 字符;标题用 text-wrap: balance,描述用 text-wrap: pretty,长文跳过;变化中的数值用 tabular-nums;截断时保留完整值可达;文字以自然大小写存储,用 text-transform 控制显示;下划线取字形度量;移动端输入框文字保持 16px;根布局做字体平滑;正确设置 lang 与 dir,混排值可用 <bdi> 隔离;默认保留文本可选中。

使用方式:审查时以阅读页面为主,眯眼检查层级、通读整段、改变视口宽度捕捉换行问题;所有修改需遵循项目既有样式系统(Tailwind、CSS Modules、styled-components、StyleX 等),不引入第二套方案。若需独立排版审查,按严重性分级(HIGH 影响可读性或结构误导、MEDIUM 影响层级与扫描、LOW 为细节打磨),以表格给出位置、前后对比与原因,并附验证结果与结论。

边界:按钮文案、错误信息、空状态等文字内容属于 better-writing;语义标题结构属于 better-accessibility;RTL 空间布局与逻辑 CSS 属性属于 better-layout;对比度测量与颜色修复属于 better-colors。本技能只负责文字的渲染、换行与混合方向行为。当与其他技能协同审查时,以统筹技能的格式与结论为准。资料未说明具体收费、平台或安装命令。