字体
TuniaoUI 提供 9 级字体大小体系,通过 getFontSizeByKey() 函数获取,确保全局字体一致性。
字体预览

字体大小体系
| 属性名 | 值(vp) | 用途 |
|---|---|---|
fontSizeXxs | 10 | 极小标注、日历描述 |
fontSizeXs | 12 | 辅助说明、字数统计 |
fontSizeSm | 13 | 次要文本 |
fontSize | 14 | 默认正文 |
fontSizeLg | 16 | 标题 |
fontSizeXl | 18 | 大标题 |
fontSizeXXl | 20 | 超大标题 |
fontSizeXXXl | 26 | 特大标题 |
fontSizeXXXXl | 32 | 巨大标题 |
使用方式
typescript
import { getFontSizeByKey } from "@tuniao/tn-ui/common/theme_helpers";
// 通过 key 获取字体大小
.fontSize(getFontSizeByKey(this.baseStyle, "fontSize")) // 14vp
.fontSize(getFontSizeByKey(this.baseStyle, "fontSizeLg")) // 16vp
.fontSize(getFontSizeByKey(this.baseStyle, "fontSizeXXXl")) // 26vp行高体系
搭配字体大小使用对应的行高:
| 属性名 | 值(vp) | 搭配 fontSize |
|---|---|---|
lineHeightXs | 14 | fontSizeXs (12) |
lineHeightXsm | 16 | fontSizeSm (13) |
lineHeightSm | 18 | fontSize (14) |
lineHeightMd | 20 | fontSizeLg (16) |
lineHeightLg | 22 | fontSizeXl (18) |
typescript
Text("正文内容")
.fontSize(getFontSizeByKey(this.baseStyle, "fontSize"))
.lineHeight(this.baseStyle.lineHeightSm)