SuperAPI AI 工具集

web-typography

设计与创作

查看项目

更新于 10-16 06:14

技能介绍

用途:为以正文为主的页面、文章、文档和阅读界面设计或审查排版,覆盖字号体系、行长、行高、字体选择与可读性。定位是起点建议而非通用法则,需按所选字体、语言、内容、视口与用户偏好调整。

主要能力与要点: 行长与字号:长正文通常每行45–75字符,可从约65ch起步并检视真实内容;正文不小于1rem,除非设计系统与无障碍测试另有依据;用rem字号和无单位line-height保留浏览器字号偏好;不要为了维持桌面行长而缩小移动端正文。宽度约束应加在阅读容器本身,避免main > *这类宽泛选择器误约束布局。 行高参考:长正文1.4–1.65,短界面文字1.2–1.4,大标题1.0–1.25,小说明文字1.4–1.7;长行、小字号和反白文字常需更大行高,标题通常更小。 段落与对齐:段间距与首行缩进通常只用其一,标题后首段不缩进;拉丁文正文默认左对齐、右端不齐;若必须两端对齐,需在每种支持语言与视口下测试,hyphens: auto需正确lang属性和浏览器词典支持;诗歌、代码等行敏感内容不做两端对齐。 字距与字体特性:让字体的字距表生效,正文不做手动字距;全大写标签可适度正向字距;小型大写、旧式数字、等宽数字仅在字体具备且内容受益时使用;不用scaleX()伪造窄体或宽体;不要全局把所有abbr转为小型大写或去掉其提示;缩写、产品名和混合大小写首字母缩略语需按内容处理。 字号体系:用少量具名尺度替代零散数值,可参考--text-sm 0.875rem、--text-base 1rem、--text-lg 1.25rem、--text-xl 1.75rem、--text-2xl 2.5rem;说明文字与代码保持可读,避免容器与嵌套子元素重复相对缩小,如pre设0.875rem、pre code用inherit、非pre内code用0.875em。 换行与标点:text-wrap: balance可改善短标题,text-wrap: pretty可改善正文,需核实布局与长文档性能;正文用正确排版标点,但保留用户输入、标识符、代码、URL和数据原样;数字与单位等断行会改变含义处慎用不换行空格;准确设置文档语言,多语言内容不要硬编码lang="en"。 字体加载:加入Web字体时需考虑加载行为,选择实际使用的子集与字重,必要处定义回退与度量覆盖,只预加载关键字体,测试回退、慢网络和用户字号状态;不要把通用字体栈直接复制进已有产品,需检查其设计令牌与授权。

审查清单:阅读容器有明确行长;正文与小字在受支持缩放和视口下可读;标题层级可见且语义正确;行高匹配字号、行长与字体;链接和缩写保留可识别提示;代码、表格、数字和多语言文本使用恰当特性;字体加载不造成可避免的布局偏移或文字不可见;规则限定在目标内容而非全局结构选择器。报告问题时引用具体选择器与文件:行号,说明阅读或布局影响,而非脱离语境强推某个数值。

限制:资料未提供安装方式、平台支持范围、收费信息或配套代码仓库说明,暂未提供;文中给出的数值均为起始参考,需实际测试确定。