Типография
Типография приложения так же важна, как и его функциональность. Vuetify.js использует Material Design спецификацию Roboto Font. Каждый размер заголовка также имеет соответствующий вспомогательный класс для стилизации других элементов одинаково.
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