Ignite UI for React のタイポグラフィ
Ignite UI for React のタイポグラフィは、マテリアル タイプ システム (英語) をモデルにしています。邪魔にならないオプションで、CSS のみを使用してタイプ スタイルを変更できます。
概要
タイプ システムは、タイプ スケールでほとんどのコンポーネントで使用されている 13 の異なるカテゴリ タイプ スタイルで構成されます。エンドユーザーはすべてのスケール カテゴリの完全な再利用、調整ができます。
すべての Ignite UI for React のブートストラップ テーマに定義されている 13 のカテゴリ スタイルのリストを次に示します。
| スケール カテゴリ | フォント ファミリ | フォントの太さ | フォント サイズ | テキスト変換 | 文字間隔 | 行の高さ | CSS 変数 |
|---|---|---|---|---|---|---|---|
| h1 | システム フォント | 500 | 2.5 rem | none | -0.09375 rem | 3 rem | --ig-h1-* |
| h2 | システム フォント | 500 | 2 rem | none | -0.0312 rem | 2.4 rem | --ig-h2-* |
| h3 | システム フォント | 500 | 1.75 rem | none | 0 | 2.1 rem | --ig-h3-* |
| h4 | システム フォント | 500 | 1.5 rem | none | 0.015625 rem | 1.8 rem | --ig-h4-* |
| h5 | システム フォント | 500 | 1.25 rem | none | 0 | 1.5 rem | --ig-h5-* |
| h6 | システム フォント | 500 | 1 rem | none | 0.009375 rem | 1.2 rem | --ig-h6-* |
| subtitle-1 | システム フォント | 400 | .875 rem | none | 0.009375 rem | 1.5 rem | --ig-subtitle-1-* |
| subtitle-2 | システム フォント | 400 | .9 rem | none | 0.00625 rem | 1.35 rem | --ig-subtitle-2-* |
| body-1 | システム フォント | 400 | 1 rem | none | 0.03125 rem | 1.5 rem | --ig-body-1-* |
| body-2 | システム フォント | 400 | .9 rem | none | 0.015625 rem | 1.5 rem | --ig-body-2-* |
| button | システム フォント | 500 | 1 rem | none | 0.046875 rem | 1.5 rem | --ig-button-* |
| caption | システム フォント | 400 | .75 rem | none | 0.025 rem | 1 rem | --ig-caption-* |
| overline | システム フォント | 400 | .625 rem | uppercase | 0.09375 rem | 1 rem | --ig-overline-* |
各テーマは独自のタイプ スケールを定義します。つまり、Material、Fluent、Bootstrap、および Indigo の各テーマに独自のタイプ スケールがあります。これらはすべて同じスケール カテゴリを共有しますが、異なるフォント ファミリ、太さ、サイズ、テキスト変換、文字間隔、線の高さを持つことができます。
使用方法
フォント ファミリの変更
すべてのコンポーネントのフォント ファミリを変更するには、--ig-font-family CSS 変数を上書きするだけです。
:root {
--ig-font-family: 'Helvetica Neue', sans-serif;
}タイプ スタイルの変更
タイプ スタイルは、Ignite UI for React のほとんどのコンポーネントによって内部的に使用されます。たとえば、igc-button コンポーネントはボタン タイプ スタイルを使用します。
タイプ スタイルのプロパティを変更するには、対応する CSS 変数を上書きする必要があります:
:root {
--ig-button-font-size: 22px;
--ig-button-line-height: 26px;
--ig-button-text-transform: lowercase;
}これにより、グローバル ボタンのタイポグラフィ スタイルが更新されることに注意してください。これらの変更を特定のボタンに適用する場合は、クラス セレクターを使用できます。