排版
应用程序的排版与其功能一样重要。Vuetify.js 使用 Material Design 规范中所要求的 Roboto 字体。每个标题大小也有一个相应的辅助器类来设置其它元素的样式。
字体大小
排版助手类允许你能够根据 Material Design 规范所要求的大小来简便的创建文本样式。
Class | Information |
---|---|
.display-4 | Light 96sp |
.display-3 | Light 60sp |
.display-2 | Regular 48sp |
.display-1 | Regular 34sp |
.headline | Regular 24sp |
.title | Medium 20sp |
.subtitle-1 | Regular 16sp |
.subtitle-2 | Medium 14sp |
.body-1 | Regular 16sp |
.body-2 | Regular 14sp |
.caption | Regular 12sp |
.overline | Regular 10sp |
Class | Information |
---|---|
.font-regular | Regular 10sp |
.font-weight-light | Condensed Light |
.font-weight-thin | Thin |
.font-weight-regular | Regular |
.font-weight-medium | Medium |
.font-weight-bold | Bold |
.font-weight-black | Black |
.font-italic | italic |
.font-italic font-weight-light | Light italic |
.font-italic font-weight-medium | Medium italic |
.font-italic font-weight-bold | Bold italic |
示例
Quantum Mechanics
Regular
6.626069x10-34
Thin
One hundred percent cotton bond
Bold italic
Quasiparticles
Bold
It became the non-relativistic limit of quantum field theory
Condensed
PAPERCRAFT
Light italic
Probabilistic wave - particle wavefunction orbital path
Medium italic
ENTANGLED
Black
Cardstock 80lb ultra-bright orange
Medium
STATIONERY
Thin
POSITION, MOMENTUM & SPIN
Condensed Light