タイポグラフィ

    Ignite UI for Angular のタイポグラフィは、マテリアル タイプ システム (英語)をモデルにしています。邪魔にならないオプションで、CSS のみを使用してタイプ スタイルを変更できます。

    概要

    タイプ システムは、タイプ スケールでほとんどのコンポーネントで使用されている 13 の異なるカテゴリ タイプ スタイルで構成されます。エンドユーザーはすべてのスケール カテゴリの完全な再利用、調整ができます。

    以下は、Ignite UI for Angular のマテリアル テーマで定義される 13 カテゴリ スタイルすべてのリストです。

    スケール カテゴリ フォント ファミリ フォントの太さ フォント サイズ テキストの変換 文字間隔 線の高さ CSS クラス CSS 変数
    h1 Titillium Web 300 6 rem none -.09375 rem 7 rem ig-typography__h1 --ig-h1-*
    h2 Titillium Web 300 3.75 rem none -.0312 rem 4.4375 rem ig-typography__h2 --ig-h2-*
    h3 Titillium Web 400 3 rem none 0 3.5625 rem ig-typography__h3 --ig-h3-*
    h4 Titillium Web 400 2.125 rem none .015625 rem 2.5 rem ig-typography__h4 --ig-h4-*
    h5 Titillium Web 400 1.5 rem none 0 1.75 rem ig-typography__h4 --ig-h5-*
    h6 Titillium Web 600 1.25 rem none .009375 rem 1.5 rem ig-typography__h4 --ig-h6-*
    subtitle-1 Titillium Web 400 1 rem none .009375 rem 1.5 rem ig-typography__subtitle-1 --ig-subtitle-1-*
    subtitle-2 Titillium Web 600 .875 rem none .00625 rem 1.5 rem ig-typography__subtitle-2 --ig-subtitle-2-*
    body-1 Titillium Web 400 1 rem none .03125 rem 1.75 rem ig-typography__body-1 --ig-body-1-*
    body-2 Titillium Web 400 .875 rem none .015625 rem 1.25 rem ig-typography__body-2 --ig-body-2-*
    button Titillium Web 600 .875 rem uppercase .046875 1 rem ig-typography__button --ig-button-*
    caption Titillium Web 400 .75 rem none .025 rem 1 rem ig-typography__caption --ig-caption-*
    overline Titillium Web 400 .625 rem uppercase .09375 rem 1 rem ig-typography__overline --ig-overline-*

    各テーマは独自のタイプ スケールを定義します。つまり、Material、Fluent、Boostrap、および Indigo の各テーマに独自のタイプ スケールがあります。これらはすべて同じスケール カテゴリを共有しますが、異なるフォント ファミリ、太さ、サイズ、テキスト変換、文字間隔、線の高さを持つことができます。

    使用方法

    Important

    デフォルトではタイポグラフィ スタイルを適用しません。アプリケーションでインフラジスティックスのタイポグラフィを使用するには、ig-typography CSS をトップ レベルの要素に設定する必要があります。そのすべての子がタイポグラフィ スタイルを使用するようになります。

    Ignite UI for Angular のマテリアル テーマのデフォルト フォントは Titillium Web です。使用にはフォントをホストするか Google フォントからのフォントを含む必要があります。

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

    フォント ファミリの変更

    すべてのコンポーネントのフォント ファミリを変更するには、--ig-typography CSS 変数を別の font-family 値で上書きするだけです。

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

    タイプ スタイル

    タイプ スタイルは、Ignite UI for Angular のほとんどのコンポーネントで内部的に使用されます。たとえば、ボタン コンポーネントはボタン タイプのスタイルを使用するとドキュメントに記載されています。これは、含まれている --ig-button-* CSS 変数を上書きすることで、ボタン コンポーネントのタイポグラフィを変更できることを意味します。

    マテリアル テーマのボタンのテキストを常に小文字に変更するとします。

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

    その他のリソース

    コミュニティに参加して新しいアイデアをご提案ください。