Vue for DTC
1.0
字体组件
Anker design适配网页端的组件库,适合在 React/Next技术栈项目中使用。
字体
用户通过文字来理解内容和完成工作,科学的字体系统应该具有良好的可读性。无衬线体更加亲和,现代,清晰便于阅读,为网页中常用的字体类型,因此 Mont for Anker 优先使用各个系统中默认的无衬线字体。
MAC OS-system | Window-system | |
---|---|---|
英文字体 | Mont For Anker | Mont For Anker |
数学字体 | Mont For Anker | Mont For Anker |
字号
文字的大小,层级,对比度等都是影响视觉可读性和阅读效率的重要因素,为保障文本的易读性,界面文字需满足以下要求: 最小可识别文字尺寸:12px
PC/Regular
字号 | 使用场景 | 示意 |
---|---|---|
t0_14px | 最小文本 | Power for every moment,@123 |
t1_16px | 辅助说明 | Power for every moment,@123 |
t2_18px | 补充文本 | Power for every moment,@123 |
t2_20px | 正文 | Power for every moment,@123 |
t3_24px | 三级标题 | Power for every moment,@123 |
t5_32px | 二级标题 | Power for every moment,@123 |
t4_40px | 一级标题 | Power for every moment,@123 |
t5_56px | 特大标题 | Power for every moment,@123 |
PC/Semibold
字号 | 使用场景 | 示意 |
---|---|---|
t0_14px | 最小文本 | Power for every moment,@123 |
t1_16px | 辅助说明 | Power for every moment,@123 |
t2_18px | 补充文本 | Power for every moment,@123 |
t2_20px | 正文 | Power for every moment,@123 |
t3_24px | 三级标题 | Power for every moment,@123 |
t5_32px | 二级标题 | Power for every moment,@123 |
t4_40px | 一级标题 | Power for every moment,@123 |
t5_56px | 特大标题 | Power for every moment,@123 |
PC/Bold
字号 | 使用场景 | 示意 |
---|---|---|
t0_14px | 最小文本 | Power for every moment,@123 |
t1_16px | 辅助说明 | Power for every moment,@123 |
t2_18px | 补充文本 | Power for every moment,@123 |
t2_20px | 正文 | Power for every moment,@123 |
t3_24px | 三级标题 | Power for every moment,@123 |
t5_32px | 二级标题 | Power for every moment,@123 |
t4_40px | 一级标题 | Power for every moment,@123 |
t5_56px | 特大标题 | Power for every moment,@123 |
MO/Regular
字号 | 使用场景 | 示意 |
---|---|---|
t0_12px | 标签,最小文本 | Power for every moment,@123 |
t0_14px | 辅助说明 | Power for every moment,@123 |
t1_16px | 征文 | Power for every moment,@123 |
t2_20px | 二级标题 | Power for every moment,@123 |
t3_24px | 一级标题 | Power for every moment,@123 |
t5_32px | 特大标题 | Power for every moment,@123 |
MO/Semibold
字号 | 使用场景 | 示意 |
---|---|---|
t0_12px | 标签,最小文本 | Power for every moment,@123 |
t0_14px | 辅助说明 | Power for every moment,@123 |
t1_16px | 征文 | Power for every moment,@123 |
t2_20px | 二级标题 | Power for every moment,@123 |
t3_24px | 一级标题 | Power for every moment,@123 |
t5_32px | 特大标题 | Power for every moment,@123 |
MO/Bold
字号 | 使用场景 | 示意 |
---|---|---|
t0_12px | 标签,最小文本 | Power for every moment,@123 |
t0_14px | 辅助说明 | Power for every moment,@123 |
t1_16px | 征文 | Power for every moment,@123 |
t2_20px | 二级标题 | Power for every moment,@123 |
t3_24px | 一级标题 | Power for every moment,@123 |
t5_32px | 特大标题 | Power for every moment,@123 |
字阶与行高
字阶和行高决定着一套字体系统的动态与秩序之美。字阶是指一系列有规律的不同尺寸的字体。行高可以理解为一个包裹在字体外面的无形的盒子。

在 Anker 视觉体系中,我们建议 PC 端主要字体为 20,与之对应的行高为 28;移动端主要字体为 16,与之对应的行高为 24。
Font Size | 12 | 14 | 16 | 18 | 20 | 24 | 32 | 40 | 48 | 56 | 68 | ... |
Line Height | 20 | 22 | 24 | 26 | 28 | 28 | 36 | 44 | 52 | 60 | 72 | ... |
字重
字重的选择同样基于秩序、稳定、克制的原则。多数情况下,只出现 regular 以及 medium 的两种字体重量,分别对应代码中的 400 和 500。在英文字体加粗的情况下会采用 semibold 的字体重量,对应代码中的 600。
AnkerRegular 400
AnkerMedium 500
AnkerBold 600