mirror of
https://github.com/element-plus/element-plus.git
synced 2026-03-13 07:51:17 +08:00
a99b20a8c1
* refactor(typography): add css var for typography & simplify example code * fix: add @use "sass:map" for _var.scss
2.3 KiB
2.3 KiB
<script>
const fontSizes = [
{
level: 'Supplementary text',
type: 'extra-small',
size: '12px',
},
{
level: 'Body (small)',
type: 'small',
size: '13px',
},
{
level: 'Body',
type: 'base',
size: '14px',
},
{
level: 'Small Title',
type: 'medium',
size: '16px',
},
{
level: 'Title',
type: 'large',
size: '18px',
},
{
level: 'Main Title',
type: 'extra-large',
size: '20px',
},
]
export default {
data() {
return {
fontSizes
}
},
methods: {
formatType(type) {
return type.split('-').map(item => item.charAt(0).toUpperCase() + item.slice(1)).join(' ');
}
},
}
</script>
タイポグラフィ
私たちは、さまざまなプラットフォームで最高のプレゼンテーションを実現するために、フォントの規約を作成します。
Font
フォント規約
| Level | Font Size | Demo |
| {{ fontSize.level }} | {{ fontSize.size + ' ' + formatType(fontSize.type) }} | Build with Element |
フォントラインの高さ
- line-height:1 No line height
- line-height:1.3 Compact
- line-height:1.5 Regular
- line-height:1.7 Loose
フォントファミリー
font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB',
'Microsoft YaHei', '微软雅黑', Arial, sans-serif;