样式与 CSS · 文字
字体排版
Typography
也叫:排版、文字排版、字号层级、Type Scale
对文字的字体、字号、字重、行高、间距和颜色做整体规划,让内容清晰易读、主次分明。
详细解释
排版决定了界面看起来专不专业。主要包括:字体(中文界面一般用系统字体,如苹方、微软雅黑)、字号层级(正文 1416px,小标题 1820px,大标题 2432px)、字重(常规 400,加粗 600)、行高(正文 1.51.8)、段落间距、文字颜色(正文深灰,辅助文字浅灰),以及每行长度(中文每行 30~40 字读起来比较舒服)。
关键是少而统一:一个产品通常只需要 46 个字号、23 种字重,定义成一套字体层级,所有页面复用,而不是每处随手写一个字号。
跟 AI 提需求时可以直接给出这套层级,或者说「使用 Tailwind 的 text-sm、text-base、text-xl 层级」。
开发者信息术语 ID、DOM 线索、识别优先级
- 术语 ID
style-typography- DOM 选择器
插件在本地识别时匹配这些 CSS 选择器(标签、ARIA role、常见组件库 class)。
span.ant-typography.el-text.n-textspan.arco-typography
- 类名关键词
类名、id、data-testid 拆成单词后连续匹配,例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。
typographytype-scale
- 组件名
React / Vue 开发模式下读到的组件名,不区分大小写,会去掉 El、Ant、Mui 这类组件库前缀。
Typography
- 优先级
- 0 · 同一层有多条命中时,优先级高的胜出
- 版本
- v1 · 更新于 2026/09/30