# 文字
蓝湖设计稿地址：文字 (opens new window)
# 字体类型
雀
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;
}
# 字号
页面主要字号使用 14 号 regular，根据页面内容及层级关系搭配使用标题，主要标题建议使用 12、14 号 semibold，导航栏标题、弹窗标题等大标题建议使用 16、18 号。
其他字号应用属特殊场景，不做为详细规范。
样式
type
字号大小
font-size
建议行高
line-height
使用场景
usage scenario
标准字体 ABCD 1234
20px
28px
特殊场景标题，应用于管理员无应用页面标题、新用户引导标题
标准字体 ABCD 1234
18px
26px
加大标题，应用于表单详情页表单名称
标准字体 ABCD 1234
16px
24px
大标题，常用于弹窗标题/导航栏应用标题/大号tabs等
标准字体 ABCD 1234
13px
22px
中标题、正文、辅助说明常用于左侧导航/表格内容/详情页正文/弹窗正文/设计器控件标题/中号tabs等
标准字体 ABCD 1234
12px
20px
小标题、辅助说明常用于表单详情控件标题/小号tabs/其他辅助说明
@h3-font-size-sl: 20px;
@h3-font-size-xl: 18px;
@h3-font-size-lg: 16px;
@h3-font-size-base: 14px;
@h3-font-size-sm: 12px;
@h3-font-size-xs: 10px;
# 字重
只出现 regular 以及 semibold 的两种字体重量，分别对应代码中的 400 和 600。regular 应用于正文内容及普通标题，semibold 应用于需要加粗强调的正文或标题。在英文字体加粗的情况下会采用 semibold 的字体重量，对应代码中的 600。
永
Regular 400
永
Semibold 600
Aa
Regular 400
Aa
Semibold 600
# 文字颜色
# V2 版本
在浅色背景下
#304265
#8893A7
#C9CCD8
#107FFF
在深色背景下
#FFFFFF / Alpha100%
#FFFFFF / Alpha85%
#FFFFFF / Alpha65%
#FFFFFF / Alpha45%
# V3 版本
在浅色背景下
#0F1C35
#777F8D
#B6BCC6
#2565F1
在深色背景下
#FFFFFF / Alpha100%
#FFFFFF / Alpha85%
#FFFFFF / Alpha65%
#FFFFFF / Alpha45%
# 文字辅助函数
奥哲基础样式内封装的文字函数，可以方便的定义规范文字样式.h3-font(@type, @color, @weight)
# 通过标识符定义文字字号
// 'xs', 'sm', 'base', ‘md’，'lg', 'xl', 'sl'
.foo {
.h3-font(xl);
}
// =>
.foo {
// @h3-font-size-xl
font-size: 18px;
line-height: 26px;
}
# 通过数字定义字号
.foo {
.h3-font(12);
}
// =>
.foo {
// @h3-font-size-sm
font-size: 12px;
line-height: 20px;
}
// ---------------------------------------------------
// 不会允许出现奇数字号，以及不在预设范围内的字号
.foo {
.h3-font(15);
}
.bar {
.h3-font(40);
}
// =>
.foo {
// @h3-font-size-xl
font-size: 16px;
line-height: 24px;
}
.bar {
// 啥也没有
}
# 同时定义字体颜色和字重
.foo {
.h3-font(md, #ffffff, 400);
}
// =>
.foo {
font-size: 14px;
line-height: 22px;
color: #4f5e7c;
font-weight: 400;
}