타이포그래피
Ignite UI for Angular의 타이포그래피는 [머티리얼 유형 시스템](https://material.io/design/typography/the-type-system.html#)을 모델로 합니다. 방해가 되지 않으며 선택 사항이므로 CSS만 사용하여 유형 스타일을 수정할 수 있습니다.
개요
유형 시스템은 대부분의 구성 요소에서 사용되는 13가지 카테고리 유형 스타일로 구성된 유형 스케일 입니다. 모든 스케일 카테고리는 최종 사용자가 완전히 재사용하고 조정할 수 있습니다.
다음은 Ignite UI for Angular의 머티리얼 테마에 대해 정의된 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, Boostrap 및 Indigo 등 우리가 제공하는 각 테마가 고유한 유형 척도를 갖는다는 것을 의미합니다. 모두 동일한 축척 범주를 공유하지만 글꼴 모음, 두께, 크기, 텍스트 변환, 문자 간격 및 줄 높이가 다를 수 있습니다.
Usage
Important
기본적으로 우리는 어떤 타이포그래피 스타일도 적용하지 않습니다. 애플리케이션에서 타이포그래피를 사용하려면 최상위 요소에 ig-typography CSS 클래스를 설정해야 합니다. 그러면 모든 하위 항목이 우리의 타이포그래피 스타일을 사용하게 됩니다.
우리는 Titillium Web을 Ignite UI for Angular의 머티리얼 테마 기본 글꼴로 선택했습니다. 이를 사용하려면 직접 호스팅하거나 Google Fonts에서 포함해야 합니다.
<link
href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700"
rel="stylesheet"
/>
body 요소에 ig-typography 클래스를 설정하여 타이포그래피 스타일을 활성화합니다.
<!-- index.html -->
<body class="ig-typography">
<app-root></app-root>
</body>
Changing the Font Family
모든 구성 요소의 글꼴 모음을 변경하려면--ig-typography CSS 변수를 다른 글꼴 모음 값으로 덮어쓰면 됩니다.
/* 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