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

Ignite UI for Web Components의 타이포그래피는 머티리얼 유형 시스템을 모델로 합니다. 방해가 되지 않으며 선택 사항이므로 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;
}

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;
}

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

API References

• Typography