アプリケーションのタイポグラフィーは重要な機能の1つです。Vuetify.js ではマテリアルデザインの仕様である Roboto Font を使用しています。それぞれの見出しのサイズには対応するヘルパークラスが存在します。

Font sizes

Typography helper classes allow you to easily style text according to Material Design sizing.

Typography Display Classes
ClassInformation
.display-4Light 96sp
.display-3Light 60sp
.display-2Regular 48sp
.display-1Regular 34sp
.headlineRegular 24sp
.titleMedium 20sp
.subtitle-1Regular 16sp
.subtitle-2Medium 14sp
.body-1Regular 16sp
.body-2Regular 14sp
.captionRegular 12sp
.overlineRegular 10sp
Style and Weight Classes
ClassInformation
.font-regularRegular 10sp
.font-weight-lightCondensed Light
.font-weight-thinThin
.font-weight-regularRegular
.font-weight-mediumMedium
.font-weight-boldBold
.font-weight-blackBlack
.font-italicitalic
.font-italic font-weight-lightLight italic
.font-italic font-weight-mediumMedium italic
.font-italic font-weight-boldBold italic

Examples

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
Edit this page on Github | Translate on Crowdin
Vuetify
StoreFor Enterprise