타이포그래피

Ignite UI for Angular 애플리케이션의 모든 구성 요소, 특정 활자체 배율 또는 특정 구성 요소에 대한 서체를 수정할 수 있습니다.

개요

애플리케이션은 서로 스케일 범주를 공유할 수 있는 여러 타이포그래피 scales 정의할 수 있습니다. scale category는 font-family, font-size, font-weight, line-height, letter-spacing 및 text-transform에 대한 정보를 포함하는 type styles 세트입니다.

Ignite UI for Angular 각 테마($material-type-scale, $fluent-type-scale, $bootstrap-type-scale 및 $indigo-type-scale에 대해 4가지 기본 유형 스케일을 노출합니다. 타이포그래피 스타일을 설정하는 typography 믹스인입니다. 그러나 추가 유형 스케일을 생성할 수 있습니다.

대부분의 경우 타이포그래피를 약간만 수정하면 되므로 아직 읽지 않았다면 CSS 변수 문서의 타이포그래피 섹션을 먼저 읽어 보는 것이 좋습니다. Sass를 사용하여 타이포그래피를 수정하는 것은 전체 타이포그래피 규모와 관련된 더 깊은 변경을 원하는 경우에만 필요합니다.

Usage

Important

기본적으로 우리는 어떤 타이포그래피 스타일도 적용하지 않습니다. 애플리케이션에서 타이포그래피를 사용하려면 최상위 요소에 ig-typography CSS 클래스를 설정하고 기본.scss 파일에 typography 믹스인을 포함해야 합니다.

Ignite UI for Angular Material 테마에서 Titillium Web을 기본 글꼴로 선택했습니다. 이를 사용하려면 직접 호스팅하거나 Google Fonts에서 포함해야 합니다.

<link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700" rel="stylesheet">

유형 스케일에서 카테고리 스타일을 설정하고 검색하는 데 사용되는 여러 믹스인과 함수가 있습니다. 사람들은:

• type-style [함수] - 유형 스케일 범주에서 사용할 스타일 규칙 세트를 반환합니다.
• type-scale [함수] - 13개의 스타일 카테고리 세트를 반환합니다.
• type-scale-category [함수] - 유형 척도 및 카테고리에서 스타일 규칙 맵을 반환합니다.
• type-style [mixin] - 특정 유형 척도 및 카테고리의 선택기에 스타일 규칙을 추가합니다.
• type-style-vars [mixin] - 특정 유형 스타일의 선택기에 스타일 규칙을 추가합니다.
• typography [mixin] - 글로벌 애플리케이션 타이포그래피 스타일을 정의합니다.

앞서 언급한 믹스인과 기능이 각각 무엇을 하는지 자세히 살펴보겠습니다.

The Type Style

​type-style 함수는 특정 인수가 척도 범주에 설정된 스타일의 일부로 전달되도록 하는 인터페이스와 유사한 함수입니다. 예를 들어, h1 스케일 카테고리에 대한 새로운 스타일 규칙 세트를 정의하고 싶다고 가정해 보겠습니다. 그렇게 하려면 간단히 다음과 같이 작성할 수 있습니다.

$h1-style: type-style(
    $font-size: 112px,
    $font-weight: 600,
    $line-height: 96px,
    ...
);

The Type Scale

활자 척도는 척도 범주로 사용되는 13가지 타이포그래피 스타일의 지도를 생성합니다. 새로운 유형 스케일을 생성하려면 다음을 수행하십시오.

$my-type-scale: type-scale(...);

Important

13개의 척도 범주 각각에 대해 서체 스타일을 제공해야 합니다. 위와 같이 type-style 함수를 사용하여 스타일을 생성할 수 있습니다.

$my-type-scale: type-scale($h1: $h1-style, [$h2...$overline]);

기존 유형 스케일을 확장하여 수정할 수 있습니다. $material-type-scale의 h1 유형 스타일을 변경하려면 다음을 수행할 수 있습니다.

$my-type-scale: extend(
  $material-type-scale, 
  (
    h1: type-style(...)
  )
);

눈금에 추가 유형 스타일을 추가하는 것도 마찬가지로 쉽습니다.

$my-type-category: type-style(
    $font-weight: 600,
    $font-size: 42px,
    $text-transform: uppercase,
    ...
);

$my-type-scale: extend(
  $my-type-scale, 
  (
    'my-category': $my-type-category
  )
);

The Typography Mixin

타이포그래피 믹스인은 기본 h1-h6 및 p 요소의 스타일 지정 방법을 포함하여 애플리케이션의 전역 타이포그래피 스타일을 정의합니다.

현재 2개의 인수를 허용합니다:

• $font-family- 애플리케이션에서 사용할 전역 글꼴 모음입니다.
• $type-scale- 애플리케이션에서 사용할 기본 유형 스케일입니다.

타이포그래피 스타일을 사용하려면 core 믹스인 뒤와 theme 믹스인 앞 어디에든 typography 믹스인을 포함하세요. 위에서 정의한 $my-type-scale 유형 스케일을 활용하여 이를 기본 유형 스케일로 만들어 보겠습니다.

@include typography(
    $font-family: $material-typeface,
    $type-scale: $my-type-scale,
);

​$material-typeface, $fluent-typeface, $bootstrap-typeface 및 $indigo-typeface와 유사한 서체에 대한 4가지 변수를 노출합니다. typography 믹스인을 포함할 때 어떤 유형의 스케일과도 조합하여 사용할 수 있습니다.

Custom Type Styles

​type-style 믹스인은 특정 유형 스케일에서 스케일 카테고리에 대한 스타일 규칙을 검색하는 데 사용할 수 있습니다. 또한 추가 스타일 규칙을 추가할 수도 있습니다.

.my-fancy-h1 {
    @include type-style('h1') {
        color: royalblue;
    }
}

위의 코드는 royalblue 색상으로 설정된 color 속성을 추가하여 $my-type-scale의 h1 스케일 범주에 대한 모든 스타일 규칙을 포함하는 클래스 스타일 선택기.my-fancy-h1 생성합니다. 이제 요소의 클래스를.my-fancy-h1로 설정하면 다른 h1 요소처럼 보이지만 색상은 royalblue 입니다.

Component Typography

Ignite UI for Angular의 구성 요소 대부분은 텍스트 스타일을 지정하기 위해 배율 범주를 사용합니다. 예를 들어, igx-card 구성 요소는 다음 스케일 범주를 사용합니다.

• h6- 카드 제목 스타일을 지정하는 데 사용됩니다.
• subtitle-2- 카드 자막 및 작은 제목의 스타일을 지정하는 데 사용됩니다.
• body-2- 카드 텍스트 콘텐츠의 스타일을 지정하는 데 사용됩니다.

카드의 텍스트 스타일을 변경하는 방법에는 두 가지가 있습니다. 첫 번째는 h6, subtitle-2 및/또는 body-2의 비늘 재료 유형 규모 타이포그래피 믹스인에 전달합니다. 따라서 카드의 제목을 더 작게 만들고 싶다면 글꼴 크기를 변경하기만 하면 됩니다. h6 규모 카테고리.

// Create a custom h6 scale category style
$my-h6: type-style($font-size: 12px);

// Create a custom type scale with the modified h6
$my-type-scale: extend($material-type-scale, (h6: $my-h6));

// Pass the custom scale to the global typography mixin
@include typography($type-scale: $my-type-scale);

Warning

위 코드는 h6 스케일 카테고리를 전체적으로 수정하여 h6 스케일을 사용하는 모든 구성 요소의 모양과 느낌에 영향을 미칩니다. 이는 모든 h6 요소가 앱 전체에서 동일하게 보이도록 일관성을 위해 수행됩니다. 우리는 귀하가 우리의 경우 igx-card 구성 요소와 같은 특정 구성 요소에만 h6에 대한 수정 사항을 적용하기를 원할 수 있다는 것을 이해합니다. 이것이 바로 모든 구성 요소에 카테고리 구성을 허용하는 자체 타이포그래피 믹스인이 있는 이유입니다.

// Create a custom h6 scale category style
$my-h6: type-style($font-size: 12px);

// You can specify which categories from the type sale the card uses
$card-categories: (
    title: 'h6',
    title-small: 'subtitle-2',
    subtitle: 'subtitle-2',
    content: 'body-2',
);

.my-cool-card {
  // Overwrite the 'h6' type style for this scope
  @include type-style-vars('h6', $my-h6);

  // Pass the custom card catergories to the card typography mixin
  @include card-typography($card-categories);
}

​h6 카테고리를 수정하여 $my-type-scale 스케일을 전달하여 더 이상 typography 믹스인을 포함하지 않습니다. 이제 우리가 할 일은 우리가 만든 사용자 정의 h6 스타일을 type-style-vars 믹스인에 전달하는 것뿐입니다.

CSS Classes

유형 스케일 범주를 기반으로 모든 구성 요소에 대한 텍스트 스타일을 추가하는 것 외에도 기본 h1-h6 및 p 요소의 스타일도 지정합니다. 이를 통해 스타일과 의미를 분리할 수 있습니다. 예를 들어 h1 태그에 typography 사용할 때 제공하는 기본 스타일이 있더라도 ig-typography__h3 클래스를 제공하여 h3 처럼 보이도록 수정할 수 있습니다.

<h1 class="ig-typography__h3">Some text</h1>

기본적으로 제공되는 모든 CSS 클래스 목록은 다음과 같습니다.

• ig-typography__h1
• ig-typography__h2
• ig-typography__h3
• ig-typography__h4
• ig-typography__h5
• ig-typography__h6
• ig-typography__subtitle-1
• ig-typography__subtitle-2
• ig-typography__body-1
• ig-typography__body-2
• ig-typography__button
• ig-typography__caption
• ig-typography__overline

Additional Resources

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

• Ignite UI for Angular 포럼
• Ignite UI for Angular GitHub