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 ClassCSS字体大小是其中基础排版能力之一。该能力的正式定义位于 packages/amis-ui/scss/helper/typography/_font-size.md它同时以「帮助类速查表」文档与 Sass 源码两种形态存在_font-size.scss文件的头部注释块/*!markdown ... */即文档内容编译时会被抽取为文档而注释下方就是真正生成 CSS 的 Sass 代码。二、完整类名速查表核心内容下表完整继承自关联文档列出 amis 提供的全部字体大小类名及其对应的font-size与line-height属性值单位均为remClassPropertiestext-xsfont-size: 0.75rem; line-height: 1remtext-smfont-size: 0.875rem; line-height: 1.25remtext-basefont-size: 1rem; line-height: 1.5remtext-mdfont-size: 1.125rem; line-height: 1.75remtext-lgfont-size: 1.25rem; line-height: 1.75remtext-xlfont-size: 1.5rem; line-height: 2remtext-2xlfont-size: 1.875rem; line-height: 2.25remtext-3xlfont-size: 2.25rem; line-height: 2.5remtext-4xlfont-size: 3rem; line-height: 1text-5xlfont-size: 3.75rem; line-height: 1text-6xlfont-size: 4.5rem; line-height: 1text-7xlfont-size: 6rem; line-height: 1text-8xlfont-size: 8rem; line-height: 1使用要点从text-xs0.75rem到text-base1rem再到text-md1.125rem、text-lg1.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-sizemixin 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.scssimport ./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.scssm: (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.5remtext-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 档字号不满足需求有两种不修改仓库文件的扩展思路覆盖$fontSizes变量在自己的 Sass 入口中、引入 amis-ui 样式之前重新定义同名变量去掉!default语义即可覆盖增删档位或调整字号/行高数值然后重新编译即可得到自定义的text-*类体系。叠加$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.scssclassName 两种配置方式与表达式能力docs/zh-CN/types/classname.md七、小结text-xs到text-8xl是 amis 内置的字体大小帮助类每个类同时规定字号与行高覆盖从正文到超大标题的完整排版需求。其实现高度工程化由$fontSizes变量表驱动make-font-sizemixin 批量产出并通过$devicesmedia-device自动生成m:/pc:响应式前缀变体。在页面 JSON 中通过className字符串或对象/表达式形式即可零成本使用是 amis 低代码配置中快速统一排版、实现响应式字号的推荐手段。【免费下载链接】amis前端低代码框架通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amis创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/9/14 5:56:39 · 阅读 1.2k amis 帮助类字体大小（Font Size）工具类全解析：text-xs 到 text-8xl 的用法、原理与响应式实践
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 ClassCSS字体大小是其中基础排版能力之一。该能力的正式定义位于 packages/amis-ui/scss/helper/typography/_font-size.md它同时以「帮助类速查表」文档与 Sass 源码两种形态存在_font-size.scss文件的头部注释块/*!markdown ... */即文档内容编译时会被抽取为文档而注释下方就是真正生成 CSS 的 Sass 代码。二、完整类名速查表核心内容下表完整继承自关联文档列出 amis 提供的全部字体大小类名及其对应的font-size与line-height属性值单位均为remClassPropertiestext-xsfont-size: 0.75rem; line-height: 1remtext-smfont-size: 0.875rem; line-height: 1.25remtext-basefont-size: 1rem; line-height: 1.5remtext-mdfont-size: 1.125rem; line-height: 1.75remtext-lgfont-size: 1.25rem; line-height: 1.75remtext-xlfont-size: 1.5rem; line-height: 2remtext-2xlfont-size: 1.875rem; line-height: 2.25remtext-3xlfont-size: 2.25rem; line-height: 2.5remtext-4xlfont-size: 3rem; line-height: 1text-5xlfont-size: 3.75rem; line-height: 1text-6xlfont-size: 4.5rem; line-height: 1text-7xlfont-size: 6rem; line-height: 1text-8xlfont-size: 8rem; line-height: 1使用要点从text-xs0.75rem到text-base1rem再到text-md1.125rem、text-lg1.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-sizemixin 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.scssimport ./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.scssm: (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.5remtext-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 档字号不满足需求有两种不修改仓库文件的扩展思路覆盖$fontSizes变量在自己的 Sass 入口中、引入 amis-ui 样式之前重新定义同名变量去掉!default语义即可覆盖增删档位或调整字号/行高数值然后重新编译即可得到自定义的text-*类体系。叠加$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.scssclassName 两种配置方式与表达式能力docs/zh-CN/types/classname.md七、小结text-xs到text-8xl是 amis 内置的字体大小帮助类每个类同时规定字号与行高覆盖从正文到超大标题的完整排版需求。其实现高度工程化由$fontSizes变量表驱动make-font-sizemixin 批量产出并通过$devicesmedia-device自动生成m:/pc:响应式前缀变体。在页面 JSON 中通过className字符串或对象/表达式形式即可零成本使用是 amis 低代码配置中快速统一排版、实现响应式字号的推荐手段。【免费下载链接】amis前端低代码框架通过 JSON 配置就能生成各种页面。项目地址: https://gitcode.com/GitHub_Trending/am/amis创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考