타이포그래피

    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

    By default we don't apply any typography styles. To use our typography in your application you have to set the ig-typography CSS class on a top-level element. All of its children will then use our typography styles.

    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"
/>

    Enable the typography styles by setting the ig-typography class on the body element.

    <!-- index.html -->
<body class="ig-typography">
  <app-root></app-root>
</body>

    Changing the Font Family

    To change the font family in all components, all you have to do is overwrite the --ig-typography CSS variable with another font-family value;

    /* styles.css */
:root {
    --ig-font-family: "Open Sans", sans-serif;
}

    Type Styles

    The type styles are used internally by most of the components in Ignite UI for Angular. For instance, the documentation says the button component uses the button type style. This means that we can modify the typography of the button component by overwriting the included --ig-button-* CSS variables.

    머티리얼 테마의 버튼 텍스트를 항상 소문자로 변경하고 싶다고 가정해 보겠습니다.

    :root {
    --ig-button-text-transform: lowercase;
}

    Additional Resources

    우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.