Font Tokens

    字号 Token 系统，定义了不同层级的文字大小、行高和字重，提供清晰的信息层级和一致的视觉体验。

    基础用法

    Tip

    点击卡片可复制 token 名称

    text-3xl
    Medium
    600
    示例文本 The quick brown fox
    Font Size30px
    Line Height38px
    点击复制
    text-2xl
    Medium
    600
    示例文本 The quick brown fox
    Font Size24px
    Line Height32px
    点击复制
    text-xl
    Medium
    600
    示例文本 The quick brown fox
    Font Size20px
    Line Height28px
    点击复制
    text-lg
    Medium
    600
    示例文本 The quick brown fox
    Font Size18px
    Line Height26px
    点击复制
    text-base-m
    Medium
    600
    示例文本 The quick brown fox
    Font Size16px
    Line Height24px
    点击复制
    text-base
    Regular
    400
    示例文本 The quick brown fox
    Font Size16px
    Line Height24px
    点击复制
    text-sm-m
    Medium
    600
    示例文本 The quick brown fox
    Font Size14px
    Line Height22px
    点击复制
    text-sm
    Regular
    400
    示例文本 The quick brown fox
    Font Size14px
    Line Height22px
    点击复制
    text-xs
    Regular
    400
    示例文本 The quick brown fox
    Font Size12px
    Line Height20px
    点击复制

    设计规范

    字号层级

    系统提供 9 个字号层级，从 text-xs (12px) 到 text-3xl (30px)，满足各种使用场景：

    TokenFont SizeLine HeightFont Weight使用场景
    text-3xl30px38px600特大标题、页面主标题
    text-2xl24px32px600大标题、区块标题
    text-xl20px28px600中标题、卡片标题
    text-lg18px26px600小标题、副标题
    text-base-m16px24px600中等正文、强调文本
    text-base16px24px400常规正文、默认文本
    text-sm-m14px22px600中等小字、辅助说明
    text-sm14px22px400小字、次要信息
    text-xs12px20px400特小字、标签文本

    字重系统

    • Medium (600)：用于标题和需要强调的文本
    • Regular (400)：用于正文和常规文本

    使用建议

    1. 标题层级：根据内容重要性选择合适的标题层级
    2. 字重搭配：同尺寸下使用不同字重来区分强调程度
    3. 行高设置：确保良好的阅读体验，避免行高过小导致文字拥挤
    4. 响应式考虑：在小屏幕设备上适当减小字号