타이포그래피
Ignite UI for Angular의 타이포그래피는 [Material Type System](https://material.io/design/typography/the-type-system.html#)을 모델로 합니다. 방해가 되지 않고 선택 사항이므로 CSS만 사용하여 문자 스타일을 수정할 수 있습니다.
개요
유형 시스템은 대부분의 구성 요소에서 사용되는 13가지 카테고리 유형 스타일로 구성된 유형 스케일 입니다. 모든 스케일 카테고리는 최종 사용자가 완전히 재사용하고 조정할 수 있습니다.
다음은 Ignite UI for Angular의 Material Theme에 대해 정의된 13개의 모든 범주 스타일 목록입니다.
| 규모 카테고리 | 글꼴군 | 글꼴 두께 | 글꼴 크기 | 텍스트 변환 | 문자 간격 | 라인 높이 | CSS 클래스 | CSS 변수 |
|---|---|---|---|---|---|---|---|---|
| h1 | 티틸리움 웹 | 300 | 6렘 | 없음 | -.09375 렘 | 7렘 | ig-typography__h1 |
--ig-h1-* |
| h2 | 티틸리움 웹 | 300 | 3.75렘 | 없음 | -.0312 렘 | 4.4375렘 | ig-typography__h2 |
--ig-h2-* |
| h3 | 티틸리움 웹 | 400 | 3렘 | 없음 | 0 | 3.5625렘 | ig-typography__h3 |
--ig-h3-* |
| h4 | 티틸리움 웹 | 400 | 2.125렘 | 없음 | .015625 렘 | 2.5렘 | ig-typography__h4 |
--ig-h4-* |
| h5 | 티틸리움 웹 | 400 | 1.5렘 | 없음 | 0 | 1.75렘 | ig-typography__h4 |
--ig-h5-* |
| h6 | 티틸리움 웹 | 600 | 1.25렘 | 없음 | .009375 렘 | 1.5렘 | ig-typography__h4 |
--ig-h6-* |
| 자막-1 | 티틸리움 웹 | 400 | 1렘 | 없음 | .009375 렘 | 1.5렘 | ig-typography__subtitle-1 |
--ig-subtitle-1-* |
| 자막-2 | 티틸리움 웹 | 600 | .875렘 | 없음 | .00625 렘 | 1.5렘 | ig-typography__subtitle-2 |
--ig-subtitle-2-* |
| 본체-1 | 티틸리움 웹 | 400 | 1렘 | 없음 | .03125 렘 | 1.75렘 | ig-typography__body-1 |
--ig-body-1-* |
| 본체-2 | 티틸리움 웹 | 400 | .875렘 | 없음 | .015625 렘 | 1.25렘 | ig-typography__body-2 |
--ig-body-2-* |
| 단추 | 티틸리움 웹 | 600 | .875렘 | 대문자 | .046875 | 1렘 | ig-typography__button |
--ig-button-* |
| 표제 | 티틸리움 웹 | 400 | 0.75렘 | 없음 | .025렘 | 1렘 | ig-typography__caption |
--ig-caption-* |
| 윗줄 | 티틸리움 웹 | 400 | .625렘 | 대문자 | .09375 렘 | 1렘 | ig-typography__overline |
--ig-overline-* |
각 주제는 고유한 유형 척도를 정의합니다. 즉, 우리가 지원하는 각 테마들 - Material, Fluent, Bootstrap, Indigo는 고유한 유형 척도를 갖게 됩니다. 모두 같은 스케일 카테고리를 공유하지만, 글꼴 계열, 굵기, 크기, 텍스트 변환, 글자 간격, 줄 높이가 다를 수 있습니다.
Usage
Important
기본적으로 타이포그래피 스타일은 적용하지 않습니다. 애플리케이션에서 타이포그래피를 사용하려면 최상위 요소에 CSS 클래스를 설정ig-typography 해야 합니다. 그 후 모든 자녀들은 우리의 타이포그래피 스타일을 사용할 것입니다.
Ignite UI for Angular에서 Material Theme의 기본 글꼴로 Titillium Web을 선택했습니다. 사용하려면 직접 호스팅하거나 Google Fonts에서 포함해야 합니다.
<link
href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700"
rel="stylesheet"
/>
클래스를 본체 요소에 설정ig-typography 하여 타이포그래피 스타일을 활성화하세요.
<!-- index.html -->
<body class="ig-typography">
<app-root></app-root>
</body>
Changing the Font Family
모든 컴포넌트의 폰트 패밀리를 변경하려면 CSS 변수를--ig-typography 다른 폰트 패밀리 값으로 덮어쓰기만 하면 됩니다;
/* styles.css */
:root {
--ig-font-family: "Open Sans", sans-serif;
}
Type Styles
타입 스타일은 Ignite UI for Angular의 대부분의 구성 요소에서 내부적으로 사용됩니다. 예를 들어, 문서에는 버튼 컴포넌트가 버튼 타입 스타일을 사용한다고 되어 있습니다. 즉, 포함된--ig-button-* CSS 변수를 덮어써 버튼 컴포넌트의 타이포그래피를 수정할 수 있습니다.
머티리얼 테마의 버튼 텍스트를 항상 소문자로 변경하고 싶다고 가정해 보겠습니다.
:root {
--ig-button-text-transform: lowercase;
}
Additional Resources
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.
GitHub