文本样式
作为视觉表达语言，排版的主要任务是简洁清晰的表明所阐述内容，段落间隔与文字密度起着至关重要的作用。良好的排版规范能大大提升用户的视觉体验，我们对字体进行统一规范，力求在各个操作系统下都有最佳展示效果。
字体 font-family
Clair 默认使用 Sans-Serif 无衬线字体，这类字体更简洁，识别性高。
中文字体
- PingFang SC
- Microsoft YaHei
- Hiragino Sans GB
英文字体
- Segoe UI
- Droid Sans
- Helvetica Neue
大小 Sizing
Clair 内置了五种大小的文字，分别在不同的场景下使用。
| 示例 | 字体大小 | CSS 类 |
|---|---|---|
标题 | 28px | `.is-size-xxl` |
标题 | 20px | `.is-size-xl` |
小标题 | 16px | `.is-size-lg` |
普通文字 | 14px | `.is-size-normal` |
小号的文字 | 13px | `.is-size-sm` |
超小号的文字 | 12px | `.is-size-xs` |
最小号的文字 | 10px | `.is-size-xxs` |
行高 line-height
Clair 提供了五种行高的大小。对于大多数内容文字来说，1.6 倍的行高更适合阅读。
.has-leading-xs
颜色或色彩是通过眼、脑和我们的生活经验所产生的一种对光的视觉效应。
.has-leading-sm
颜色或色彩是通过眼、脑和我们的生活经验所产生的一种对光的视觉效应。
.has-leading-md
颜色或色彩是通过眼、脑和我们的生活经验所产生的一种对光的视觉效应。
.has-leading-lg
颜色或色彩是通过眼、脑和我们的生活经验所产生的一种对光的视觉效应。
.has-leading-xl
颜色或色彩是通过眼、脑和我们的生活经验所产生的一种对光的视觉效应。
对齐
使用 CSS 类 .has-text-left、.has-text-right、.has-text-centered 和 .has-text-justified 分别控制文本左对齐、右对齐、居中对齐和两端对齐。
文字粗细
使用 CSS 类 .has-weight-bold、.has-weight-normal 和 .has-weight-light 分别控制文本以粗体、正常和纤细展示。