排版
应用程序的排版与其功能一样重要。Vuetify.js使用Material Design规范Roboto字体。每个标题大小也有一个相应的辅助器类来设置其它元素的样式。
Font sizes
Typography helper classes allow you to easily style text according to Material Design sizing.
.display-4- Good for<h1>.display-3- Good for<h2>.display-2- Good for<h3>.display-1- Good for<h4>.headline- Good for<h5>.title- Good for<h6>.subheading- Good for supporting text.body-2- Regular body text with additional weight.body-1- Regular body text.caption- Smaller size text
.display-4Light 112sp
.display-3Regular 56sp
.display-2Regular 45sp
.display-1Regular 34sp
.headlineRegular 24sp
.titleMedium 20sp
.subheadingRegular 16sp
.body-2Medium 14sp
.body-1Regular 14sp
.captionRegular 12sp
Font weights
Material design supports 100, 300, 400, 500, 700, 900 font weights.
.font-weight-thin- Sets font-weight to 100.font-weight-light- Sets font-weight to 300.font-weight-regular- Sets font-weight to 400.font-weight-medium- Sets font-weight to 500.font-weight-bold- Sets font-weight to 700.font-weight-black- Sets font-weight to 900
Text can also have an italic applied to it.
.font-italic - Sets the font-style to italic
Roboto Thin
.font-weight-thin
Roboto Light
.font-weight-light
Roboto Regular
.font-weight-regular
Roboto Medium
.font-weight-medium
Roboto Bold
.font-weight-bold
Roboto Black
.font-weight-black
Roboto Thin Italic
.font-weight-thin.font-italic
Roboto Light Italic
.font-weight-light.font-italic
Roboto Regular Italic
.font-weight-regular.font-italic
Roboto Medium Italic
.font-weight-medium.font-italic
Roboto Bold Italic
.font-weight-bold.font-italic
Roboto Black Italic
.font-weight-black.font-italicText transforms
Control the casing with a text transform.
.text-capitalize- Sets text-transform to capitalize.text-lowercase- Sets text-transform to lowercase.text-none- Sets text-transform to none.text-uppercase- Sets text-transform to uppercase
Text wrapping
Force text to not wrap or truncate it if its too long.
.text-no-wrap- Sets whitespace to no-wrap.text-truncate- Truncates overflowed text