跳到主要内容

样式与 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
style-typography
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器(标签、ARIA role、常见组件库 class)。

  • span.ant-typography
  • .el-text
  • .n-text
  • span.arco-typography
类名关键词

类名、id、data-testid 拆成单词后连续匹配,例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • typography
  • type-scale
组件名

React / Vue 开发模式下读到的组件名,不区分大小写,会去掉 El、Ant、Mui 这类组件库前缀。

  • Typography
优先级
0 · 同一层有多条命中时,优先级高的胜出
版本
v1 · 更新于 2026/09/30