テキスト
フォントサイズ、行の高さ、文字間隔をまとめて設定するテキストスタイル。
このページの内容
クラス
| クラス | 宣言 |
|---|---|
text-<name> | font-size: var(--text-<name>);line-height: var(--text-<name>--line-height, normal);letter-spacing: var(--text-<name>--letter-spacing, normal); |
主要な --text-<name> トークンがクラスを作ります。付随する --line-height と --letter-spacing は任意で、省略時は normal を使います。ファミリー、ウェイト、色は別のクラスで指定します。
値
各行は、1 つのクラスが参照する 3 つの値を示します。プリセットのサイズは対応する font-size トークンを参照し、表では読みやすいように参照を解決しています。すべてのプリセットスタイルに、両方の付随トークンが含まれます。
| クラス | サイズ | 行の高さ | 文字間隔 |
|---|---|---|---|
text-3xs | .5rem8px | 1.5 | 0 |
text-2xs | .625rem10px | 1.5 | 0 |
text-xs | .75rem12px | 1.5 | 0 |
text-sm | .875rem14px | 1.5 | 0 |
text-md | 1rem16px | 1.6 | 0 |
text-lg | 1.125rem18px | 1.5 | 0 |
text-xl | 1.25rem20px | 1.4 | -.01em |
text-2xl | 1.5rem24px | 1.35 | -.015em |
text-3xl | 2rem32px | 1.25 | -.02em |
text-4xl | 2.25rem36px | 1.2 | -.025em |
text-5xl | 2.5rem40px | 1.15 | -.03em |
text-6xl | 3rem48px | 1.1 | -.035em |
text-7xl | 3.75rem60px | 1.05 | -.04em |
text-8xl | 4.5rem72px | 1.05 | -.04em |
text-9xl | 6rem96px | 1 | -.045em |
text-10xl | 8rem128px | 1 | -.05em |
すべてのテキストスタイルを比較
text-3xstext-2xstext-xstext-smtext-mdtext-lgtext-xltext-2xltext-3xltext-4xltext-5xltext-6xltext-7xltext-8xltext-9xltext-10xl1 つの主要トークンから 3 つの宣言
--text-card は text-card を登録します。このクラスは常にフォントサイズ、行の高さ、文字間隔を出力します。--text-card--line-height または --text-card--letter-spacing がない場合、その宣言には normal を使い、継承した値は保持しません。
テキストスタイルは常に 3 つのプロパティを設定する
ここでは主要な --text-card トークンだけを定義しています。付随する 2 つの宣言も生成され、normal を使って、継承した行の高さや文字間隔を置き換えます。
テキストによる説明
- 独自のテーマは --text-card を 1.5rem と定義し、付随トークンはどちらも定義しません。
- text-card は font-size: var(--text-card)、line-height: var(--text-card--line-height, normal)、letter-spacing: var(--text-card--letter-spacing, normal) を出力します。
- 3 本の実線の分岐は、すべて出力される宣言です。付随値がない場合は normal にフォールバックし、別の行の高さや文字間隔を継承するのではありません。
- 付随トークンだけでは text-card は登録されません。ファミリー、ウェイト、色は、この組み合わせスタイルの対象外です。
付随トークンだけではテキストスタイルは登録されません。変更したい値が行の高さや文字間隔だけでも、主要なサイズトークンを追加してください。
付随トークンは、この組み合わせスタイルが使う値であり、別のクラス名ではありません。個別に調整するには、font-<size>、leading-<name>、tracking-<name> を使います。同じ条件では、これらの単一プロパティのユーティリティはテキストの組み合わせスタイルより後になり、対応する宣言を上書きできます。class 属性での順序は結果を決めません。
この組み合わせスタイルは、フォントの読み込み、ファミリーやウェイトの選択、マージンの追加、段落幅の決定は行いません。スタイルを選んで組み合わせ、階層を作る方法はタイポグラフィガイドで説明しています。
関連項目： フォント、行の高さ、文字間隔、生成ルールの順序.
使用例
段落に 1 つのテキストスタイルを適用します。ファミリー、ウェイト、色は引き続き独立して指定できます。
A paragraph keeps its size, line height and letter spacing together. Its container can grow when the same text wraps onto another line.
<p class="… text-lg">A paragraph keeps its size,…</p>生成された CSS
@layer theme { :root, :host { --font-size-lg: 1.125rem; --text-lg: var(--font-size-lg); --text-lg--line-height: 1.5; --text-lg--letter-spacing: 0 }}@layer utilities { .text-lg { font-size: var(--text-lg); line-height: var(--text-lg--line-height, normal); letter-spacing: var(--text-lg--letter-spacing, normal) }}カスタマイズ
付随トークンとともにテキストスタイルを追加します。--text-display を定義すると text-display が使えるようになります。
@theme { --text-display: 3.5rem; --text-display--line-height: 1.1; --text-display--letter-spacing: -.03em;}生成された CSS
@layer theme { :root, :host { --text-display: 3.5rem; --text-display--line-height: 1.1; --text-display--letter-spacing: -.03em }}@layer utilities { .text-display { font-size: var(--text-display); line-height: var(--text-display--line-height, normal); letter-spacing: var(--text-display--letter-spacing, normal) }}関連項目： テーマのディレクティブ、タイポグラフィ.