Files
element/examples/docs/zh-CN/typography.md
2016-11-07 23:33:33 +08:00

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