Ignite UI for Web Components のタイポグラフィ

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

概要

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

すべての Ignite UI for Web Components のブートストラップ テーマに定義されている 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、Boostrap、および Indigo の各テーマに独自のタイプ スケールがあります。これらはすべて同じスケール カテゴリを共有しますが、異なるフォント ファミリ、太さ、サイズ、テキスト変換、文字間隔、線の高さを持つことができます。

使用方法

フォント ファミリの変更

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

:root {
  --ig-font-family: 'Helvetica Neue', sans-serif;
}

タイプ スタイルの変更

タイプ スタイルは、Ignite UI for Web Components のほとんどのコンポーネントによって内部的に使用されます。たとえば、igc-button コンポーネントはボタン タイプ スタイルを使用します。 タイプ スタイルのプロパティを変更するには、対応する CSS 変数を上書きする必要があります:

:root {
  --ig-button-font-size: 22px;
  --ig-button-line-height: 26px;
  --ig-button-text-transform: lowercase;
}

これにより、グローバル ボタンのタイポグラフィ スタイルが更新されることに注意してください。これらの変更を特定のボタンに適用する場合は、クラス セレクターを使用できます。

API リファレンス

• Typography