@lateinos/thinking-ui

# 文字

字体是UI设计中最基本的构成之一。字体系统的建立主要解决的是内容可读性以及信息的表达。通过定义字体的使用规则在设计上达到统一性和整体性，从而在阅读的舒适性上达到平衡。

有格移动端设计规范：规范

# 字体类型

雀
Pingfang SC
Aa
sans-serif
// 值
@h3-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,  'Helvetica Neue',
 Helvetica, 'PingFang SC', 'Hiragino Sans GB',  'Microsoft YaHei', SimSun, sans-serif;

// 使用示例
.main {
  font-family: @h3-font-family;
}

# 字号

样式
type
字号大小
font-size
建议行高
line-height
使用场景
usage scenario
标准字体 ABCD 1234
10px
14px
说明文字
标准字体 ABCD 1234
13px
18px
徽标，二级描述，辅助信息
标准字体 ABCD 1234
14px
20px
标签文字, 轻提示
标准字体 ABCD 1234
15px
22px
正文
标准字体 ABCD 1234
16px
24px
数据表文字，中型按钮，气泡文字
标准字体 ABCD 1234
17px
26px
子表标题，常规按钮，弹窗按钮
标准字体 ABCD 1234
18px
28px
弹窗标题，全局按钮
// 字号
@h3-font-size-sl: 18px;
@h3-font-size-xl: 17px;
@h3-font-size-lg: 16px;
@h3-font-size-base: 15px; 
@h3-font-size-ml: 14px;
@h3-font-size-sm: 13px;
@h3-font-size-xs: 10px;

// 行高
@h3-font-lineheight-sl: 28px;
@h3-font-lineheight-xl: 26px;
@h3-font-lineheight-lg: 24px;
@h3-font-lineheight-base: 22px; 
@h3-font-lineheight-ml: 20px;
@h3-font-lineheight-sm: 18px;
@h3-font-lineheight-xs: 14px;

# 字重

只出现 regular 以及 semibold 的两种字体重量，分别对应代码中的400 和 600。regular应用于正文内容及普通标题，semibold应用于需要加粗强调的正文或标题。在英文字体加粗的情况下会采用 semibold 的字体重量，对应代码中的 600。

永
Regular 400
永
Semibold 600
Aa
Regular 400
Aa
Semibold 600

# 文字颜色

#121933
h3-color-text-primary
#707481
h3-color-text-secondary
#BBBECA
h3-color-text-disabled 
// 字体颜色
@h3-color-text-primary: ...; //一极黑 标题正文
@h3-color-text-secondary: ...; //二极黑 辅助文本
@h3-color-text-disabled: ....; //三极黑 失效文本

← 线 →