タイポグラフィ
Ignite UI for Angular のタイポグラフィは、マテリアル タイプ システム (英語)をモデルにしています。邪魔にならないオプションで、CSS のみを使用してタイプ スタイルを変更できます。
概要
タイプ システムは、タイプ スケールでほとんどのコンポーネントで使用されている 13 の異なるカテゴリ タイプ スタイルで構成されます。エンドユーザーはすべてのスケール カテゴリの完全な再利用、調整ができます。
以下は、Ignite UI for Angular のマテリアル テーマで定義される 13 カテゴリ スタイルすべてのリストです。
| スケール カテゴリ | フォント ファミリ | フォントの太さ | フォント サイズ | テキストの変換 | 文字間隔 | 線の高さ | CSS クラス |
|---|---|---|---|---|---|---|---|
| h1 | Titillium Web | 300 | 6 rem | none (なし) | -.09375 rem | 7 rem | igx-typography__h1 |
| h2 | Titillium Web | 300 | 3.75 rem | none (なし) | -.0312 rem | 4.4375 rem | igx-typography__h2 |
| h3 | Titillium Web | 400 | 3 rem | none (なし) | 0 | 3.5625 rem | igx-typography__h3 |
| h4 | Titillium Web | 400 | 2.125 rem | none (なし) | .015625 rem | 2.5 rem | igx-typography__h4 |
| h5 | Titillium Web | 400 | 1.5 rem | none (なし) | 0 | 1.75 rem | igx-typography__h4 |
| h6 | Titillium Web | 600 | 1.25 rem | none (なし) | .009375 rem | 1.5 rem | igx-typography__h4 |
| subtitle-1 | Titillium Web | 400 | 1 rem | none (なし) | .009375 rem | 1.5 rem | igx-typography__subtitle-1 |
| subtitle-2 | Titillium Web | 600 | .875 rem | none (なし) | .00625 rem | 1.5 rem | igx-typography__subtitle-2 |
| body-1 | Titillium Web | 400 | 1 rem | none (なし) | .03125 rem | 1.75 rem | igx-typography__body-1 |
| body-2 | Titillium Web | 400 | .875 rem | none (なし) | .015625 rem | 1.25 rem | igx-typography__body-2 |
| button | Titillium Web | 600 | .875 rem | uppercase (大文字) | .046875 | 1 rem | igx-typography__button |
| caption | Titillium Web | 400 | .75 rem | none (なし) | .025 rem | 1 rem | igx-typography__caption |
| overline | Titillium Web | 400 | .625 rem | uppercase (大文字) | .09375 rem | 1 rem | igx-typography__overline |
各テーマは独自のタイプ スケールを定義します。つまり、Material、Fluent、Boostrap、および Indigo の各テーマに独自のタイプ スケールがあります。これらはすべて同じスケール カテゴリを共有しますが、異なるフォント ファミリ、太さ、サイズ、テキスト変換、文字間隔、線の高さを持つことができます。
使用方法
Important
デフォルトではタイポグラフィ スタイルを適用しません。アプリケーションでインフラジスティックスのタイポグラフィを使用するには、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 要素で igx-typography クラスを設定してタイポグラフィ スタイルを有効にします。
<!-- index.html -->
<body class="igx-typography">
<app-root></app-root>
</body>
フォント ファミリの変更
すべてのコンポーネントでフォント ファミリを変更するには、typography クラスを希望の font-family 値で上書きします。
/* styles.css */
.igx-typography {
font-family: "Open Sans", sans-serif;
}
タイプ スタイル
タイプ スタイルは、Ignite UI for Angular のほとんどのコンポーネントで内部的に使用されます。たとえば、ボタン コンポーネントはボタン タイプのスタイルを使用するとドキュメントに記載されています。つまり、含まれる igx-typography__button クラスを上書きすることによって、ボタン コンポーネントのタイポグラフィをコピーして変更できます。
マテリアル テーマのボタンのテキストを常に小文字に変更するとします。
.igx-typography .igx-typography__button {
text-transform: lowercase;
}
<!-- app.component.html -->
<button [igxButton] class="igx-typography__button">Flat</button>
一部のコンポーネントには、テンプレートに多くの要素が埋め込まれています。CSS クラスを使用して直接変更するには、注意が必要です。この記事の作成時点では、このようなコンポーネントのタイポグラフィを完全に変更する唯一の方法は、Sass タイポグラフィ ミックスインにフォールバックする必要があります。CSS 変数を使用して個々のコンポーネントのタイポグラフィを変更するより良い方法の提供に取り組んでいます。
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。
GitHub