Hyunhoo's blog

Appearance

Typography ​

Headings Classes ​

https://quasar.dev/style/typography#headings

text-h1
text-h2
text-h3
text-h4
text-h5
text-h6
text-subtitle1
text-subtitle2
text-body1
text-body2
text-caption
text-overline

Font Weights Classes ​

https://quasar.dev/style/typography#font-weights

text-weight-thin
text-weight-light
text-weight-regular
text-weight-medium
text-weight-bold
text-weight-bolder

CSS Helper Classes ​

text-right
text-left
text-center
text-justify
text-bold
text-italic
text-no-wrapwhite-space: nowrap
text-striketext-decoration: line-through
text-uppercase
text-lowercase
text-capitalize

기본글꼴 ​

default는 Roboto이며 100, 300, 400, 500, 700, 900 등 6가지 글꼴 두께를 사용할 수 있습니다.

quasar.config ​

js
extras: ["roboto-font"];

custom 글꼴 추가 ​

  1. 새 웹폰트 [customfont].woff(또는 어떤 확장명이든 상관없이 woff모든 브라우저에서 호환성을 위해 권장됨)를 원하는 디렉토리에 복사하세요. 예시) ../src/css/fonts/[customfont.woff]
  2. 글꼴을 선언하십시오 ./src/css/app.{css|sass|scss|styl}(또는 적합하다고 판단되는 모든 위치에서 웹 글꼴 파일의 상대 경로를 올바르게 업데이트하십시오).
css
@font-face {
  font-family: customfont;
  src: url(./fonts/customfont.woff);
}

// declare a class which applies it
.my-font {
  font-family: "customfont";
}