Skip to content

字体

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

字体预览

字体大小预览

字体大小体系

属性名值(vp)用途
fontSizeXxs10极小标注、日历描述
fontSizeXs12辅助说明、字数统计
fontSizeSm13次要文本
fontSize14默认正文
fontSizeLg16标题
fontSizeXl18大标题
fontSizeXXl20超大标题
fontSizeXXXl26特大标题
fontSizeXXXXl32巨大标题

使用方式

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
lineHeightXs14fontSizeXs (12)
lineHeightXsm16fontSizeSm (13)
lineHeightSm18fontSize (14)
lineHeightMd20fontSizeLg (16)
lineHeightLg22fontSizeXl (18)
typescript
Text("正文内容")
  .fontSize(getFontSizeByKey(this.baseStyle, "fontSize"))
  .lineHeight(this.baseStyle.lineHeightSm)