Newtil CSS

폰트 (Font) ​

폰트 컴포넌트는 제목을 나타낼 수 있는 컴포넌트입니다.

Usage ​

폰트 컴포넌트는 요소에 n-font:타입 클래스를 적용하여 사용할 수 있습니다.

Title
html
<div class="n-font n-font:title">Title</div>

Type ​

Title
Sub title
Heading 1
Heading 2
Heading 3
타입클래스약어 클래스
titlen-font:title-
subtitlen-font:subtitle-
heading-1n-font:heading-1n-font:heading
n-font:h1
heading-2n-font:heading-2n-font:h2
heading-3n-font:heading-3n-font:h3

Responsive ​

화면 너비에 따라 폰트 사이즈가 달라집니다.

Title
Sub title
Heading 1
Heading 2
Heading 3
defaultmin-width: 768px
title30px32px
subtitle18px20px
heading-124px26px
heading-220px22px
heading-316px18px

Overriding ​

폰트 컴포넌트는 스타일 재정의에 대한 변수를 아래와 같이 제공하고 있습니다.

css
/* font.css */
.n-font {
  /* title */
  --font-title-font-size: 30px;
  --font-title-font-weight: 700;
  --font-title-line-height: 150%;
  --font-title-letter-spacing: -0.02em;

  /* subtitle */
  --font-subtitle-font-size: 18px;
  --font-subtitle-font-weight: 500;
  --font-subtitle-line-height: 150%;
  --font-subtitle-letter-spacing: -0.02em;

  /* heading-1 */
  --font-heading-1-font-size: 24px;
  --font-heading-1-font-weight: 500;
  --font-heading-1-line-height: 150%;
  --font-heading-1-letter-spacing: -0.02em;

  /* heading-2 */
  --font-heading-2-font-size: 20px;
  --font-heading-2-font-weight: 500;
  --font-heading-2-line-height: 150%;
  --font-heading-2-letter-spacing: -0.02em;

  /* heading-3 */
  --font-heading-3-font-size: 16px;
  --font-heading-3-font-weight: 500;
  --font-heading-3-line-height: 150%;
  --font-heading-3-letter-spacing: -0.02em;
}

@media (min-width: 768px) {
  .n-font{
    --font-title-font-size: 32px;
    --font-subtitle-font-size: 20px;
    --font-heading-1-font-size: 26px;
    --font-heading-2-font-size: 22px;
    --font-heading-3-font-size: 18px;
  }
}

Example ​

Title
Sub title
Heading 1
Heading 2
Heading 3
css
/* root.css */
.n-font {
  /* title */
  --font-title-font-size: 36px;
  --font-title-font-weight: 800;

  /* subtitle */
  --font-subtitle-font-size: 24px;
  --font-subtitle-font-weight: 600;

  /* heading-1 */
  --font-heading-1-font-size: 30px;
  --font-heading-1-font-weight: 600;

  /* heading-2 */
  --font-heading-2-font-size: 26px;
  --font-heading-2-font-weight: 600;

  /* heading-3 */
  --font-heading-3-font-size: 22px;
  --font-heading-3-font-weight: 600;
}

@media (min-width: 768px) {
  .n-font{
    /* .... */
  }
}

TIP

컴포넌트 스타일 재정의에 대한 자세한 내용은 스타일 재정의하기에서 확인하실 수 있습니다.

Copyright © 2024 newlecture