Ignite UI for Web Components의 타이포그래피

    Ignite UI for Web Components의 타이포그래피는 Material Type System을 모델로 한 것입니다. 방해가 되지 않고 선택 사항이므로 CSS만 사용하여 문자 스타일을 수정할 수 있습니다.

    개요

    유형 시스템은 대부분의 구성 요소에서 사용되는 13가지 카테고리 유형 스타일로 구성된 유형 스케일 입니다. 모든 스케일 카테고리는 최종 사용자가 완전히 재사용하고 조정할 수 있습니다.

    다음은 Ignite UI for Web Components의 Bootstrap 테마에 대해 정의 된 13 가지 범주 스타일 목록입니다.

    규모 카테고리 글꼴군 글꼴 두께 글꼴 크기 텍스트 변환 문자 간격 라인 높이 CSS 변수
    h1 System Font 500 2.5렘 없음 -0.09375 rem 3렘 --ig-h1-*
    h2 System Font 500 2 rem 없음 -0.0312 rem 2.4 rem --ig-h2-*
    h3 System Font 500 1.75렘 없음 0 2.1 rem --ig-h3-*
    h4 System Font 500 1.5렘 없음 0.015625 rem 1.8 rem --ig-h4-*
    h5 System Font 500 1.25렘 없음 0 1.5렘 --ig-h5-*
    h6 System Font 500 1렘 없음 0.009375 rem 1.2 rem --ig-h6-*
    자막-1 System Font 400 .875렘 없음 0.009375 rem 1.5렘 --ig-subtitle-1-*
    자막-2 System Font 400 .9 rem 없음 0.00625 rem 1.35 rem --ig-subtitle-2-*
    본체-1 System Font 400 1렘 없음 0.03125 rem 1.5렘 --ig-body-1-*
    본체-2 System Font 400 .9 rem 없음 0.015625 rem 1.5렘 --ig-body-2-*
    단추 System Font 500 1렘 없음 0.046875 rem 1.5렘 --ig-button-*
    표제 System Font 400 0.75렘 없음 0.025 rem 1렘 --ig-caption-*
    윗줄 System Font 400 .625렘 대문자 0.09375 rem 1렘 --ig-overline-*

    각 테마는 고유한 서체 규모를 정의합니다. 이는 Material, Fluent, Boostrap 및 Indigo 등 우리가 제공하는 각 테마가 고유한 유형 척도를 갖는다는 것을 의미합니다. 모두 동일한 축척 범주를 공유하지만 글꼴 모음, 두께, 크기, 텍스트 변환, 문자 간격 및 줄 높이가 다를 수 있습니다.

    Usage

    Changing font family

    모든 구성 요소의 글꼴 모음을 변경하려면--ig-font-family CSS 변수를 덮어쓰기만 하면 됩니다.

    :root {
  --ig-font-family: 'Helvetica Neue', sans-serif;
}
css

    Changing type styles

    문자 스타일은 Ignite UI for Web Components에 있는 대부분의 구성 요소에서 내부적으로 사용됩니다. 예를 들어, igc-button 구성 요소는 버튼 유형 스타일을 사용합니다. 문자 스타일 속성을 변경하려면 해당 CSS 변수를 덮어써야 합니다.

    :root {
  --ig-button-font-size: 22px;
  --ig-button-line-height: 26px;
  --ig-button-text-transform: lowercase;
}
css

    이렇게 하면 전역 버튼 타이포그래피 스타일이 업데이트된다는 점을 명심하세요. 이러한 변경 사항을 특정 버튼에 적용하려면 클래스 선택기를 사용할 수 있습니다.

    Ignite UI for Web Components | CTA Banner

    API References

    • Typography