mirror of
https://github.com/ElemeFE/element.git
synced 2025-12-16 11:44:01 +08:00
3.3 KiB
3.3 KiB
<style>
.demo-typo-box {
height: 200px;
width: 200px;
position: relative;
border: 1px solid #eaeefb;
font-size: 40px;
color: #1f2d3d;
text-align: center;
line-height: 162px;
padding-bottom: 36px;
box-sizing: border-box;
display: inline-block;
margin-right: 17px;
border-radius: 4px;
.name {
position: absolute;
bottom: 0;
width: 100%;
height: 35px;
border-top: 1px solid #eaeefb;
font-size: 14px;
color: #8492a6;
line-height: 35px;
text-align: left;
text-indent: 10px;
font-family: 'Helvetica Neue';
}
}
.demo-typo-size {
.h1 {
font-size: 20px;
}
.h2 {
font-size: 18px;
}
.h3 {
font-size: 16px;
}
.text-regular {
font-size: 14px;
}
.text-small {
font-size: 13px;
}
.text-smaller {
font-size: 12px;
}
.color-dark-light {
color: #99a9bf;
}
}
.typo-PingFang {
font-family: 'PingFang SC';
}
.typo-Hiragino {
font-family: 'Hiragino Sans GB';
}
.typo-Microsoft {
font-family: 'Microsoft YaHei';
}
/* 英文 */
.typo-Helvetica-Neue {
font-family: 'Helvetica Neue';
}
.typo-Helvetica {
font-family: 'Helvetica';
}
.typo-Arial {
font-family: 'Arial';
}
</style>
Typography 字体
我们对字体进行统一规范，力求在各个操作系统下都有最佳展示效果。
中文字体
和畅惠风
PingFang SC
和畅惠风
Hiragino Sans GB
和畅惠风
Microsoft YaHei
英文／数字字体
RGag
Helvetica Neue
RGag
Helvetica
RGag
Arial
Font-family 代码
font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
字体使用规范
| 主标题 | 用 Element 快速搭建页面 | 20px Extra large |
| 标题 | 用 Element 快速搭建页面 | 18px large |
| 小标题 | 用 Element 快速搭建页面 | 16px Medium |
| 正文 | 用 Element 快速搭建页面 | 14px Small |
| 正文（小） | 用 Element 快速搭建页面 | 13px Extra Small |
| 辅助文字 | 用 Element 快速搭建页面 | 12px Extra Extra Small |