타이포그래피

Ignite UI for Angular Typography Sass 모듈을 사용하면 애플리케이션의 모든 구성 요소, 특정 타이포그래피 스케일 또는 특정 구성 요소에 대한 타이포그래피를 수정할 수 있습니다.

개요

An application can define multiple typography scales that may share scale categories between one another. A scale category is a set of type styles, containing information about font-family, font-size, font-weight, line-height, letter-spacing, and text-transform.

Ignite UI for Angular exposes 4 default type scales for each of its themes - $material-type-scale, $fluent-type-scale, $bootstrap-type-scale, and $indigo-type-scale, which are in turn used by the typography mixin to set the typography styles. You can, however, create additional type scales.

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

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 and include the typography mixin in your base .scss file.

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

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

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

type-style [function] - Returns a set of style rules to be used by a type scale category.
type-scale [function] - Returns a set of 13 style categories.
type-scale-category [function] - Returns a map of style rules from a type scale and category.
type-style [mixin] - Adds style rules to a selector from a specific type scale and category.
type-style-vars [mixin] - Adds style rules to a selector from a specific type style.
typography [mixin] - Defines the global application typography styles.

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

The Type Style

The type-style function is an interface-like function that simply ensures that certain arguments are passed as part of the style set for a scale category. Say, for instance that we want to define a new set of style rules for the h1 scale category. To do so, we could simply write:

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

The Type Scale

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

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

Important

You have to provide a type style for each of the 13 scale categories. A style can be generated using the type-style function as shown above.

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

You can modify an existing type scale by extending it. To change the h1 type style of the $material-type-scale you can do:

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

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

$my-type-category: type-style(
  $font-weight: 600,
  $font-size: rem(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 - The global font family to be used by the application.
$type-scale - The default type scale to be used by the application.

To use the typography styles, include the typography mixin anywhere after the core. Let's take advantage of the type scale $my-type-scale we defined above and make it the default type scale.

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

We expose four variables for typeface, similar to type-scale - $material-typeface, $fluent-typeface, $bootstrap-typeface, and $indigo-typeface. You can use any of them in combination with any type-scale when including the typography mixin.

Custom Type Styles

The type-style mixin can be used to retrieve the style rules for a scale category from a specific type scale. Furthermore, it allows you to add additional style rules.

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

The above code will produce a class style selector .my-fancy-h1, which contains all of the style rules for the h1 scale category from $my-type-scale with the addition of the color property set to the royalblue color. Now, if you set the class of any element to .my-fancy-h1, it will look like any other h1 element but be also royalblue in color.

Component Typography

Most of the components in Ignite UI for Angular use scale categories for styling the text. For instance, the igx-card component uses the following scale categories:

h6 - used for styling card title.
subtitle-2 - used for styling card subtitle and small title.
body-2 - used for styling card text content.

There are two ways to change the text styles of a card. The first is by modifying the h6, subtitle-2, and/or body-2 scales in the material type scale that we pass to the typography mixin. So if we wanted to make the title in a card smaller, all we have to do is change the font-size of the h6 scale category.

// Create a custom h6 scale category style
$my-h6: type-style(
  $font-size: rem(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

The above code will modify the h6 scale category globally, which will affect the look and feel of all components that use the h6 scale. This is done for consistency so that all h6 elements look the same across your app. We understand that you may want to apply the modification for h6 to specific components only, like the igx-card component in our case. This is why every component has its own typography mixin, which accepts a category configuration.

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

// You can specify which categories from the type sale the card uses
$card-categories: (
  title: 'h6',
  title-small: 'subtitle-1',
  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);
}

We no longer include the typography mixin by passing it the $my-type-scale scale with our modification to the h6 category. Now all we do is pass the custom h6 style we created to the type-style-vars mixin.

카드 타이포그래피 믹스인을 사용하여 카드 구성 요소의 모든 요소에 대한 타이포그래피 스타일을 업데이트할 수 있습니다. 위의 예에서 $card-categories 맵의 title-small 키에는 subtitle-1 유형 스타일이 할당됩니다. 이 변경으로 카드의 작은 제목이 약간 커집니다. 기본적으로 카드 구성 요소는 subtitle-1보다 글꼴 크기가 작은 작은 제목에 대해 subtitle-2 유형 스타일을 사용합니다. mixin을 사용하면 이 기본값을 무시하고 새 스타일을 적용할 수 있습니다.

Converting Units

We also have three typography functions for converting property units. With the functions we can convert px units to em or rem, and also em or rem units to px. All we need to do is call one of the three functions and pass a value that we want to convert.

To 'px'

.my-component {
  margin: px(3.23rem);
}

To 'rem'

.my-component {
  margin: rem(10px) rem(5px);
}

To 'em'

.my-component {
  margin: em(10px) em(5px);
}

값을 변환할 때 변환은 기본 글꼴 크기인 16px(여기서 16px = 1em/rem)를 기반으로 한다는 점을 기억하는 것이 중요합니다. 원하는 경우 변환 함수에 대한 인수로 사용자 정의 기본 글꼴 크기를 제공할 수 있습니다. 이렇게 하면 결과 값이 지정된 기본 글꼴 크기를 기준으로 계산됩니다.

.my-component {
  margin: rem(10px, 26px);
  // The result will be 0.385rem
}

이렇게 하면 26px의 글꼴 크기에 따라 10px 값이 rem으로 변환됩니다.

CSS Classes

In addition to adding text styles for all components based on type scale categories, we also style the default h1-h6 and p elements. This allows us to separate semantics from styling. So for instance, even though the h1 tag has some default styling that we provide when using typography, you can modify it to look like an h3 by giving it a class of ig-typography__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

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