---
order: 4
title: 字体规范
---

## Font-family 字体家族

根据系统自动设定，无需特别添加字体文件。

| 系统 |中文  |英文   |
|---------|---------|---------|
|  Windows 系统      |  微软雅黑(Microsoft YaHei)        |  Arial           |
|  MacOS/iOS 系统    |   苹方(PingFang SC)              |  Helvetica       |

## Font-style 字体样式

| 字号 | 行高  | 使用场景  |
|---------|---------|---------|
|  12px              |   20px                          |  主字体大小，应用于列表内容，下拉、选择、输入框，弹窗等控件文字 |
|  14px              |   22px                          |  应用于左侧菜单栏字体，主标题字体，弹窗标题字体大小      |
|  16px              |   24px                          |  应用于顶部导航字体和部分需要强调的标题      |
|  20px              |   28px                          |  较少使用，应用于部分大标题      |
|  40px              |   48px                          |  应用于数据统计概览页面等需突出数字      |

## Color and weight 字重

字重分为 PingFangSC-Regular 与 PingFangSC-Medium 两种。

| 颜色 |名称  | 使用场景  |
|---------|---------|---------|
|     <input style="background: #1D78FF;width: 80px; height: 26px;border: 1px solid #fff;" />    |   #1D78FF      | 选中文本颜色，可点击状态 |
|     <input style="background: #3D446E;width: 80px; height: 26px;border: 1px solid #fff;" />    |   #3D446E      | 主字体颜色，次级按钮字体颜色 |
|     <input style="background: #64698B;width: 80px; height: 26px;border: 1px solid #fff;" />    |   #64698B      | 应用于辅助说明类文字，未选中 tab 颜色，图注字体颜色等 |
|     <input style="background: #8B8FA8;width: 80px; height: 26px;border: 1px solid #fff;" />    |   #8B8FA8      | 次要辅助文字，文本内容层级较低需弱化的情况，图注字体颜色等 |
|     <input style="background: #B1B4C5;width: 80px; height: 26px;border: 1px solid #fff;" />    |   #B1B4C5      | 应用于默认状态输入框内提示信息颜色 |