企业官网建设流程全解析

amis 帮助类字体大小（Font Size）工具类全解析：text-xs 到 text-8xl 的用法、原理与响应式实践

【免费下载链接】amis前端低代码框架，通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amis

本文以 packages/amis-ui/scss/helper/typography/_font-size.md 为核心，结合 amis-ui 源码中的 Sass 实现、变量定义与辅助类入口，系统讲解 amis 前端低代码框架内置的字体大小帮助类（text-xs~text-8xl）的完整用法、底层生成机制与响应式变体。读者读完可以掌握在 amis JSON 配置中直接用 className 快速控制字号与行高、理解这些工具类如何由$fontSizes变量批量生成，以及如何通过m:/pc:前缀适配移动端与桌面端。

一、什么是 amis 的字体大小帮助类

amis 是前端低代码框架，页面由 JSON 配置描述，组件 DOM 上的 CSS 类名可以通过className与xxxClassName属性配置。为了在不写自定义 CSS 的情况下快速调整界面排版，amis-ui 提供了一套帮助类（Helper / Utility Class）CSS，字体大小是其中基础排版能力之一。

该能力的正式定义位于 packages/amis-ui/scss/helper/typography/_font-size.md，它同时以「帮助类速查表」文档与 Sass 源码两种形态存在：_font-size.scss文件的头部注释块（/*!markdown ... */）即文档内容，编译时会被抽取为文档，而注释下方就是真正生成 CSS 的 Sass 代码。

二、完整类名速查表（核心内容）

下表完整继承自关联文档，列出 amis 提供的全部字体大小类名及其对应的font-size与line-height属性值（单位均为rem）：

使用要点：

• 从text-xs（0.75rem）到text-base（1rem）再到text-md（1.125rem）、text-lg（1.25rem）为止，字号呈常规递进；text-2xl起进入超大标题尺寸段。
• 小尺寸到中等尺寸的类（text-xs~text-xl）同时设置了成比例的行高（如text-sm行高 1.25rem），保证多行文本的行距合理；而text-4xl及以上的超大字号行高固定为1（即与字号相同，用于标题类短文本，避免行高撑爆布局）。
• 所有值基于rem单位，会随根元素font-size缩放，因此配合全局字体基准（默认按 16px 计算，见_variables.scss中的$remFactor: 16px）可得到整倍数像素值，例如text-xs即 12px/16px 行高。

三、底层实现原理：一个 mixin 批量生成整套类

字体大小帮助类并非手工逐条编写的静态 CSS，而是由 packages/amis-ui/scss/helper/typography/_font-size.scss 中的一个 Sass mixin 依据变量表循环生成的。

3.1 变量表$fontSizes

所有类名与属性值的数据源定义在 packages/amis-ui/scss/_variables.scss：

$fontSizes: ( xs: 0.75rem 1rem, sm: 0.875rem 1.25rem, base: 1rem 1.5rem, md: 1.125rem 1.75rem, lg: 1.25rem 1.75rem, xl: 1.5rem 2rem, 2xl: 1.875rem 2.25rem, 3xl: 2.25rem 2.5rem, 4xl: 3rem 1, 5xl: 3.75rem 1, 6xl: 4.5rem 1, 7xl: 6rem 1, 8xl: 8rem 1 ) !default;

每个键值对的格式为类名后缀: 字号 行高，与速查表一一对应。因为带!default标记，外部主题可以在引入 amis-ui 之前覆盖该变量，从而定制整套字号体系。

3.2 生成 mixinmake-font-size

@mixin make-font-size($prefix: '.', $suffix: '') { @each $name, $values in $fontSizes { #{$prefix}text-#{$name}#{$suffix} { font-size: nth($values, 1); line-height: nth($values, 2); } } }

• 通过@each遍历$fontSizes，用nth($values, 1)/nth($values, 2)取出字号与行高；
• $prefix与$suffix参数让同一个 mixin 既能生成基础类（.text-xs），也能生成带设备前缀的响应式变体（.m\:text-xs）；
• 调用入口位于 packages/amis-ui/scss/helper.scss：@import './helper/typography/font-size';，整套帮助类通过 helper.scss 汇总进组件库样式。

3.3 响应式变体的生成

在_font-size.scss尾部：

@include make-font-size(); @each $deivce in map-keys($devices) { @include media-device($deivce) { @include make-font-size('.' + selector-escape($deivce + ':')); } }

• $devices定义于 packages/amis-ui/scss/_variables.scss：m: '(max-width: 768px)'（移动端）、pc: '(min-width: 769px)'（桌面端）；
• 每个设备各生成一套前缀类，如.m\:text-lg、.pc\:text-lg，类名中的冒号经selector-escape（定义于 packages/amis-ui/scss/_functions.scss）转义为\:，保证在 CSS 选择器里合法；
• media-devicemixin（见 packages/amis-ui/scss/_mixins.scss）负责把这些变体包进对应媒体查询中。

因此最终产物相当于：

.text-xs { font-size: 0.75rem; line-height: 1rem; } /* ……其余基础类…… */ @media (max-width: 768px) { .m\:text-xs { font-size: 0.75rem; line-height: 1rem; } /* …… */ } @media (min-width: 769px) { .pc\:text-xs { font-size: 0.75rem; line-height: 1rem; } /* …… */ }

四、在 amis JSON 配置中实战使用

帮助类需要在组件上配置 className 才能生效。amis 组件大多支持className与各类xxxClassName属性，其用法在 docs/zh-CN/types/classname.md 中有完整说明，支持两种配置方式。

4.1 字符串方式：直接指定字号

{ "type": "page", "body": [ { "type": "static", "name": "title", "label": "标题", "className": "text-xl font-bold" }, { "type": "static", "name": "desc", "label": "描述", "className": "text-sm text-muted" } ] }

这里text-xl控制主字号为 1.5rem，text-sm让描述文字保持较小字号，可与font-bold（见 font-weight 帮助类）、text-muted（见 text-color 帮助类）等排版类自由组合。

4.2 对象方式：按数据状态切换字号

对象配置适合结合表达式按数据动态决定字号：

{ "type": "mapping", "name": "status", "map": { "1": "离线", "2": "在线" }, "className": { "text-sm": "${status == 1}", "text-lg": "${status == 2}" } }

此外，从 3.5 版本开始类名本身也支持表达式，例如"className": "text-${size}"，可直接把数据里的字号档位拼进类名。

4.3 响应式字号：m: / pc: 前缀

需要让同一文本在不同设备上显示不同大小时，组合使用响应式前缀类，例如让标题在移动端用text-lg、桌面端用text-3xl：

{ "type": "static", "label": "响应式标题", "value": "Hello amis", "className": "text-lg m:text-lg pc:text-3xl" }

解析规则：

• 基础类text-lg作为默认值（所有屏幕生效）；
• .m\:text-lg仅在max-width: 768px的移动端生效；
• .pc\:text-3xl仅在min-width: 769px的桌面端生效。

由于媒体查询内的类优先级更高（在 CSS 中后声明且更具体），桌面端会正确覆盖为text-3xl，移动端则保持text-lg。该前缀体系与间距、宽度、颜色等其他帮助类（如 margin、width）完全一致，学习一次即可通用于整套帮助类。

五、自定义与扩展指南

如果内置 13 档字号不满足需求，有两种不修改仓库文件的扩展思路：

1. 覆盖$fontSizes变量：在自己的 Sass 入口中、引入 amis-ui 样式之前重新定义同名变量（去掉!default语义即可覆盖），增删档位或调整字号/行高数值，然后重新编译即可得到自定义的text-*类体系。
2. 叠加$devices：同样可以在引入前覆盖$devices增加更多断点（如平板tablet），对应前缀类会自动生成。

六、相关资源索引

• 字体大小帮助类定义与速查表：packages/amis-ui/scss/helper/typography/_font-size.md、packages/amis-ui/scss/helper/typography/_font-size.scss
• 字号与断点变量表：packages/amis-ui/scss/_variables.scss、packages/amis-ui/scss/_variables.scss
• 媒体查询与选择器转义工具：packages/amis-ui/scss/_mixins.scss、packages/amis-ui/scss/_functions.scss
• 帮助类统一入口：packages/amis-ui/scss/helper.scss
• className 两种配置方式与表达式能力：docs/zh-CN/types/classname.md

七、小结

text-xs到text-8xl是 amis 内置的字体大小帮助类，每个类同时规定字号与行高，覆盖从正文到超大标题的完整排版需求。其实现高度工程化：由$fontSizes变量表驱动make-font-sizemixin 批量产出，并通过$devices+media-device自动生成m:/pc:响应式前缀变体。在页面 JSON 中通过className（字符串或对象/表达式形式）即可零成本使用，是 amis 低代码配置中快速统一排版、实现响应式字号的推荐手段。

【免费下载链接】amis前端低代码框架，通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amis