Типография

Типография приложения так же важна, как и его функциональность. 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-4
Light 112sp
.display-3
Regular 56sp
.display-2
Regular 45sp
.display-1
Regular 34sp
.headline
Regular 24sp
.title
Medium 20sp
.subheading
Regular 16sp
.body-2
Medium 14sp
.body-1
Regular 14sp
.caption
Regular 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-italic

Text 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
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

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
Edit this page | language on Github