ZartUI Mobile

字体规范

定义 ZartUI Mobile 的字体族、字阶、行高与字重系统，确保界面文字在不同场景下具备统一的视觉节奏与层次感。

字体族
界面文字首选
思源黑体
Source Han Sans SC · 正文 / 标题 / 标签
界面文字示例
AaBbCc 1234
Source Han Sans SC Regular / Medium
数字首选
HarmonyOS Sans
统计数字 / 金额 / 计量单位
1,234,567.89
¥ 9,980.00
HarmonyOS Sans Regular / Medium
字阶与行高
预览
使用场景
字号 / 行高
行高比
字重
文章标题
文章标题
24px / 36px
1.5
500
导航标题
导航标题
20px / 30px
1.5
500
正文内容（常规）
分组标题 正文内容
16px / 24px
1.5
400
正文内容（长文本）
正文内容
14px / 22px
1.57
400
次级文字说明内容
说明 补充内容
12px / 18px
1.5
400
字重规范
Regular
Regular
font-weight: 400
中文正文默认字重，用于正文内容、次级文字等场景。
中文正文
Medium
Medium
font-weight: 500
中文加粗字重，用于标题、分组标签、强调内容等场景。
中文加粗
Semibold
Semibold
font-weight: 600
仅限英文加粗场景使用，中文字体不使用此字重。
英文加粗专用
字体颜色
#223355
正文
正文 / 标题 / 主要文字
#6B7A99
辅助文字
辅助说明 / 次要信息
#A8B4C8
预设文字
占位符 / 禁用态
#3388FF
链接文字
超链接 / 可点击文字
#FF4433
危险提示
错误 / 删除 / 危险操作
#FFAA00
警示提示
警告 / 待确认状态
#11C79B
成功提示
成功提示 / 完成状态
i
中文字重说明：中文字体只使用 Regular (400) 与 Medium (500) 两种字重。 Semibold (600) 仅在英文字符需要加粗时使用，切勿将其应用于中文内容，以避免字形过重影响阅读体验。
CSS 变量参考
/* 字体族 */
--font-ui: "Source Han Sans SC", "思源黑体", "PingFang SC", -apple-system, sans-serif;
--font-number: "HarmonyOS Sans", "DIN Alternate", "Roboto", monospace;

/* 字阶 */
--text-article:   24px;  /* 行高 36px */
--text-nav:       20px;  /* 行高 30px */
--text-body:      16px;  /* 行高 24px */
--text-long:      14px;  /* 行高 22px */
--text-secondary: 12px;  /* 行高 18px */

/* 字重 */
--weight-regular: 400;  /* 中文正文 */
--weight-medium:  500;  /* 中文加粗 / 标题 */
--weight-semibold:600;  /* 英文加粗专用 */

/* 字体颜色 */
--color-text-primary:   #223355;  /* 正文 */
--color-text-secondary: #6B7A99;  /* 辅助文字 */
--color-text-hint:      #A8B4C8;  /* 预设文字 */
--color-text-link:      #3388FF;  /* 链接文字 */
--color-text-danger:    #FF4433;  /* 危险提示 */
--color-text-warning:   #FFAA00;  /* 警示提示 */
--color-text-success:   #11C79B;  /* 成功提示 */
返回组件首页