zfb
GitHub リポジトリ

検索したい単語を入力

いつでも検索バーを開ける

フォントファミリー

設定済みフォントファミリーを選ぶか、任意の font-family 値を指定します。

要素に適用するフォントファミリーを選びます。サイト内で繰り返し使うスタックは名前付きトークンにし、その場限りの指定には任意値を使います。

クラスと CSS の早見表

クラスの例期待される宣言
font-uifont-family: var(--zw-font-family-ui);
font-[Georgia,_serif]font-family: Georgia, serif;
例の設定

共通のプレビュー設定では spec 1、reset none、strict モード、spacingUnit 0.25rem、ブレークポイントなしを明示しています。トークンを使う各例では tokens.fontFamilies をレコード内に記述します。ブラウザーや Tailwind のテーマは前提にしません。wind-demo クラスは余白、枠、ラベル、色だけを加え、フォントユーティリティが書体を指定します。

使い方の例

設定したスタックを比べる

tokens.fontFamilies に ui、reading、code を設定し、それぞれのテキストに名前付きフォントを直接適用します。

設定したスタックを比べる
HTML
<div class="wind-demo-family">
  <p><span class="wind-demo-label">Interface</span><span class="font-ui">A clear system sans / 読みやすいサンセリフ</span></p>
  <p><span class="wind-demo-label">Reading</span><span class="font-reading">A serif voice / セリフ体の雰囲気</span></p>
  <p><span class="wind-demo-label">Code</span><span class="font-code">const value = 42;</span></p>
</div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-font-family-code: ui-monospace, monospace;
    --zw-font-family-reading: Georgia, "Times New Roman", serif;
    --zw-font-family-ui: system-ui, sans-serif;
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo-family {
  color: #223247;
  border: 1px solid #b7c5d4;
  padding: 1rem;
}

.wind-demo-family p {
  margin: 0;
  padding: .45rem 0;
  border-bottom: 1px solid #d8e0e8;
}

.wind-demo-family p:last-child {
  border-bottom: 0;
}

.wind-demo-label {
  display: inline-block;
  width: 5.5rem;
  color: #5d6c7c;
  font-size: .8rem;
}
.font-code {
  font-family: var(--zw-font-family-code);
}
.font-reading {
  font-family: var(--zw-font-family-reading);
}
.font-ui {
  font-family: var(--zw-font-family-ui);
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem",
      "fontFamilies": {
        "ui": "system-ui, sans-serif",
        "reading": "Georgia, 'Times New Roman', serif",
        "code": "ui-monospace, monospace"
      }
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo-family": true,
      "wind-demo-label": true
    },
    "safelist": {
      "docs-preview": [
        "font-ui",
        "font-reading",
        "font-code"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo-family { color: #223247; border: 1px solid #b7c5d4; padding: 1rem; }
.wind-demo-family p { margin: 0; padding: 0.45rem 0; border-bottom: 1px solid #d8e0e8; }
.wind-demo-family p:last-child { border-bottom: 0; }
.wind-demo-label { display: inline-block; width: 5.5rem; color: #5d6c7c; font-size: 0.8rem; }

その場だけのスタックを指定する

font-[Georgia,_serif] はアンダースコアを空白に戻して Georgia, serif として解決します。プレビューを独立させるため、トークン設定もこの例に記述しています。

その場だけのスタックを指定する
HTML
<p class="wind-demo-type font-[Georgia,_serif]">A one-off serif stack / 任意のフォント指定</p>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-font-family-code: ui-monospace, monospace;
    --zw-font-family-reading: Georgia, "Times New Roman", serif;
    --zw-font-family-ui: system-ui, sans-serif;
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo-type {
  color: #223247;
  border-left: 3px solid #6d7f96;
  padding: .5rem .75rem;
}
.font-\[Georgia\,_serif\] {
  font-family: Georgia, serif;
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem",
      "fontFamilies": {
        "ui": "system-ui, sans-serif",
        "reading": "Georgia, 'Times New Roman', serif",
        "code": "ui-monospace, monospace"
      }
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo-type": true
    },
    "safelist": {
      "docs-preview": [
        "font-[Georgia,_serif]"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo-type { color: #223247; border-left: 3px solid #6d7f96; padding: 0.5rem 0.75rem; }

任意値と名前付きの値

font-reading は tokens.fontFamilies.reading を参照します。font-family と font-weight は同じ font ルートを使うため、ひとつの設定内で名前が重ならないようにします。font-[Georgia,_serif] のような任意値ではアンダースコアが空白になり、font-family の値として検証されます。複数箇所で使うスタックは名前付きトークンにし、局所的な例外には任意値を使うと管理しやすくなります。指定したフォントはアプリ側で読み込まれている必要があります。

関連ガイド: ユーティリティの文法 · バリアント

カタログの詳細

font

フィールド値
カタログ識別子v1.font.family
クラスパターンfont-<suffix>
文法{"acceptedKinds":["token","arbitrary"],"arbitraryProperty":"font-family","allowsFractionSlash":false,"allowsColorOpacity":false}
受け入れる値この項目には独立した値の定義がありません。
トークンカテゴリfontFamilies
負の値の規則forbidden
競合グループと順位font-family (15)
並び順の順位0
セレクタの形ownElement
仕様バージョン1
出力するプロパティfont-family

受け入れる値

この項目には独立した値の定義がありません。

宣言テンプレート

プロパティ値の種類固定値
font-familyresolvednull

カタログの例

クラスの例期待される宣言
font-[sans-serif]font-family: sans-serif

Revision History

作成更新