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

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

개요

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

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

규모 카테고리	글꼴군	글꼴 두께	글꼴 크기	텍스트 변환	문자 간격	라인 높이	**CSS Variables*-
**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-*
**subtitle-1*-	System Font	400	.875렘	없음	0.009375 rem	1.5렘	--ig-subtitle-1-*
**subtitle-2*-	System Font	400	.9 rem	없음	0.00625 rem	1.35 rem	--ig-subtitle-2-*
**body-1*-	System Font	400	1렘	없음	0.03125 rem	1.5렘	--ig-body-1-*
**body-2*-	System Font	400	.9 rem	없음	0.015625 rem	1.5렘	--ig-body-2-*
**button*-	System Font	500	1렘	없음	0.046875 rem	1.5렘	--ig-button-*
**caption*-	System Font	400	0.75렘	없음	0.025 rem	1렘	--ig-caption-*
**overline*-	System Font	400	.625렘	대문자	0.09375 rem	1렘	--ig-overline-*

각 주제는 고유한 유형 척도를 정의합니다. 즉, 우리가 지원하는 각 테마들 - Material, Fluent, Bootstrap, Indigo는 고유한 유형 척도를 갖게 됩니다. 모두 같은 스케일 카테고리를 공유하지만, 글꼴 계열, 굵기, 크기, 텍스트 변환, 글자 간격, 줄 높이가 다를 수 있습니다.

Usage

Changing font family

To change the font family in all components, all you have to do is overwrite the --ig-font-family CSS variable:

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

Changing type styles

The type styles are used internally by most of the components in Ignite UI for Web Components. For instance, the igc-button component uses the button type style. To change any of the type style properties, we need to overwrite the corresponding CSS variable:

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

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

API References

• Typography