ナビゲーション
トークン

フォント

ファミリー、サイズ、ウェイトを、いずれも font-* 形式で指定します。

このページの内容

クラス

クラス宣言
font-<family>font-family: var(--font-family-<family>);
font-<size>font-size: var(--font-size-<size>);
font-<weight>font-weight: var(--font-weight-<weight>);

3 つの名前空間が font- 接頭辞を共有するため、名前はその間で一意でなければなりません。複数の名前空間に同じ名前を定義すると、AMBIGUOUS_TOKEN が報告され、CSS は生成されません。

値

ファミリーは順序付きのフォールバックリスト、サイズは rem 単位の長さ、ウェイトは数値による指定です。ピクセル換算はルートのフォントサイズを 16px と仮定しています。実際の書体と利用可能なウェイトは、ページに読み込まれたフォントによって決まります。

ファミリー

クラス値
font-sans
var(--font-sans, ui-sans-serif), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"var(--font-sans, ui-sans-serif), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
font-mono
var(--font-mono, ui-monospace), SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospacevar(--font-mono, ui-monospace), SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
font-serif
var(--font-serif, ui-serif), Georgia, Cambria, "Times New Roman", Times, serifvar(--font-serif, ui-serif), Georgia, Cambria, "Times New Roman", Times, serif
すべてのフォントファミリーを比較
font-sans
The shape of a letter
font-mono
The shape of a letter
font-serif
The shape of a letter

サイズ

クラス値
font-3xs.5rem8px
font-2xs.625rem10px
font-xs.75rem12px
font-sm.875rem14px
font-md1rem16px
font-lg1.125rem18px
font-xl1.25rem20px
font-2xl1.5rem24px
font-3xl2rem32px
font-4xl2.25rem36px
font-5xl2.5rem40px
font-6xl3rem48px
font-7xl3.75rem60px
font-8xl4.5rem72px
font-9xl6rem96px
font-10xl8rem128px
すべてのフォントサイズを比較
font-3xs
Aa
font-2xs
Aa
font-xs
Aa
font-sm
Aa
font-md
Aa
font-lg
Aa
font-xl
Aa
font-2xl
Aa
font-3xl
Aa
font-4xl
Aa
font-5xl
Aa
font-6xl
Aa
font-7xl
Aa
font-8xl
Aa
font-9xl
Aa
font-10xl
Aa

ウェイト

クラス値
font-thin100
font-extralight200
font-light300
font-regular400
font-medium500
font-semibold600
font-bold700
font-extrabold800
font-heavy900
すべてのウェイトを比較
font-thin
The shape of a letter
font-extralight
The shape of a letter
font-light
The shape of a letter
font-regular
The shape of a letter
font-medium
The shape of a letter
font-semibold
The shape of a letter
font-bold
The shape of a letter
font-extrabold
The shape of a letter
font-heavy
The shape of a letter

接頭辞は共通でもプロパティは独立

font-serif、font-4xl、font-semibold は、それぞれ font-family、font-size、font-weight を設定します。異なるプロパティなので併用できますが、いずれも完全なテキストスタイルではありません。

font 接頭辞は独立した 3 つのプロパティを変える

各行は font-sans、font-2xl、font-regular から始まり、結果では対象のプロパティのクラスだけを置き換えます。実際の書体は利用可能なフォントによって決まります。

テキストによる説明
  1. 基準のテキストは sans ファミリー、1.5rem のサイズ、400 のウェイトを使い、ルートのフォントサイズは 16px です。
  2. font-serif の行は font-family だけを変えます。font-4xl の行は font-size だけを 2.25rem に変え、font-semibold の行は font-weight だけを 600 に変えます。
  3. 各結果は同じ言葉を使います。共通の単位なしの line-height 1.5 で読みやすさを保っていますが、これらの font クラスが line-height を設定するわけではありません。
  4. 見本は実際のプリセット CSS と利用可能なシステムフォントで描画しています。ファミリーのクラスがフォントファイルをダウンロードするという意味ではありません。

サイズのクラスは、行の高さと文字間隔をそれぞれの宣言や継承に委ねます。3 つの寸法を 1 つのスタイルから指定したい場合は、text-<name> を使います。どちらの形式でも、ファミリーとウェイトは独立しています。

ファミリートークンはフォント名を指定するだけで、ダウンロードは行いません。プリセットの sans、mono、serif のスタックは、それぞれ任意のフック --font-sans、--font-mono、--font-serif から始まります。フォントの読み込みとサイト全体のスタック選択は、タイポグラフィガイドで説明しています。

独自のキーは 3 つの名前空間の間で重複させないでください。--font-family-brand と --font-size-brand が両方あると、font-brand は曖昧になります。(font-size:var(--font-size-brand)) のような明示的なネイティブ宣言なら、目的のプロパティと変数を指定できます。

関連項目： テキストスタイル、名前空間の解決、ネイティブのフォント選択.

使用例

見出しに大きめのサイズと中程度のウェイトを指定し、コード例には等幅のファミリーを使います。

Release notes

Install the new version with npm i @master/css.

<h3 class="… font-2xl font-medium">Release notes</h3><p class="… font-sm">Install the new version with <code class="… font-mono font-xs">npm i @master/css</code>.</p>
生成された CSS
@layer theme {  :root,  :host {    --font-family-mono: var(--font-mono, ui-monospace), SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;    --font-weight-medium: 500;    --font-size-xs: .75rem;    --font-size-sm: .875rem;    --font-size-2xl: 1.5rem  }}@layer utilities {  .font-mono {    font-family: var(--font-family-mono)  }  .font-2xl {    font-size: var(--font-size-2xl)  }  .font-sm {    font-size: var(--font-size-sm)  }  .font-xs {    font-size: var(--font-size-xs)  }  .font-medium {    font-weight: var(--font-weight-medium)  }}

カスタマイズ

各名前空間はそれぞれのトークンを受け付けます。--font-family-display は font-display を、--font-size-hero は font-hero を利用可能にします。

@theme {  --font-family-display: "Inter Display", var(--font-family-sans);  --font-size-hero: 4rem;}
生成された CSS
@layer theme {  :root,  :host {    --font-family-sans: var(--font-sans, ui-sans-serif), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"  }  :root,  :host {    --font-family-display: "Inter Display", var(--font-family-sans);    --font-size-hero: 4rem  }}@layer utilities {  .font-display {    font-family: var(--font-family-display)  }  .font-hero {    font-size: var(--font-size-hero)  }}

関連項目： テーマのディレクティブ、タイポグラフィ.