zfb
GitHub リポジトリ

検索したい単語を入力

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

フォントウェイト

設定済みフォントウェイトを選ぶか、任意のウェイト値を指定します。

フォントファミリーやサイズを変えずに、文字の線の太さを調整します。繰り返し使う役割には名前付きの重みを、設定した尺度にない値には任意の数値を使います。

クラスと CSS の早見表

クラスの例期待される宣言
font-mediumfont-weight: var(--zw-font-weight-medium);
font-[550]font-weight: 550;
例の設定

共通のプレビュー設定では spec 1、reset none、strict モード、spacingUnit 0.25rem、ブレークポイントなしを明示しています。各例は tokens.fontWeights に regular 400、medium 500、strong 700 を設定します。wind-demo クラスはラベルと枠だけを整え、font-weight は指定しません。

使い方の例

名前付きの太さを比べる

周囲のレイアウトと文章をそろえ、設定した3段階の線の太さを比べます。

名前付きの太さを比べる
HTML
<div class="wind-demo-weight">
  <p><span class="wind-demo-label">Regular</span><span class="font-regular">The same words at regular weight</span></p>
  <p><span class="wind-demo-label">Medium</span><span class="font-medium">The same words at medium weight</span></p>
  <p><span class="wind-demo-label">Strong</span><span class="font-strong">The same words at strong weight</span></p>
</div>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-font-weight-medium: 500;
    --zw-font-weight-regular: 400;
    --zw-font-weight-strong: 700;
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo-weight {
  color: #223247;
  border: 1px solid #b7c5d4;
  padding: 1rem;
}

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

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

.wind-demo-label {
  display: inline-block;
  width: 5.5rem;
  color: #5d6c7c;
  font-size: .8rem;
}
.font-medium {
  font-weight: var(--zw-font-weight-medium);
}
.font-regular {
  font-weight: var(--zw-font-weight-regular);
}
.font-strong {
  font-weight: var(--zw-font-weight-strong);
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem",
      "fontWeights": {
        "regular": "400",
        "medium": "500",
        "strong": "700"
      }
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo-weight": true,
      "wind-demo-label": true
    },
    "safelist": {
      "docs-preview": [
        "font-regular",
        "font-medium",
        "font-strong"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo-weight { color: #223247; border: 1px solid #b7c5d4; padding: 1rem; }
.wind-demo-weight p { margin: 0; padding: 0.45rem 0; border-bottom: 1px solid #d8e0e8; }
.wind-demo-weight p:last-child { border-bottom: 0; }
.wind-demo-label { display: inline-block; width: 5.5rem; color: #5d6c7c; font-size: 0.8rem; }

中間の数値を指定する

font-[550] は 550 を要求し、font-medium は設定した 500 のトークンを使います。

中間の数値を指定する
HTML
<p class="wind-demo-weight-line">Compare <span class="font-medium">medium</span> with <span class="font-[550]">an arbitrary 550</span>.</p>
CSS
@layer zw-reset, zw-tokens, zfb-hi, base, components;
@layer zw-tokens {
  :root {
    --zw-font-weight-medium: 500;
    --zw-font-weight-regular: 400;
    --zw-font-weight-strong: 700;
    --zw-spacing-unit: .25rem;
  }
}
.wind-demo-weight-line {
  color: #223247;
  border-left: 3px solid #6d7f96;
  padding: .5rem .75rem;
}
.font-\[550\] {
  font-weight: 550;
}
.font-medium {
  font-weight: var(--zw-font-weight-medium);
}
この例の設定
{
  "wind": {
    "spec": 1,
    "reset": "none",
    "strict": true,
    "tokens": {
      "spacingUnit": "0.25rem",
      "fontWeights": {
        "regular": "400",
        "medium": "500",
        "strong": "700"
      }
    },
    "breakpoints": {},
    "defaultTransitionTimingFunction": "ease",
    "authoredClasses": {
      "wind-demo-weight-line": true
    },
    "safelist": {
      "docs-preview": [
        "font-medium",
        "font-[550]"
      ]
    }
  }
}
デモ用の自作 CSS
.wind-demo-weight-line { color: #223247; border-left: 3px solid #6d7f96; padding: 0.5rem 0.75rem; }

任意値と名前付きの値

font-medium は tokens.fontWeights.medium を参照します。font-[550] のようなクラスは検証済みの任意の font-weight 値を指定します。見た目に反映できる重みは選択したフォントに依存します。ブラウザーによる擬似的な太字化や可変フォントの軸によっても印象が変わります。

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

カタログの詳細

font

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

受け入れる値

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

宣言テンプレート

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

カタログの例

クラスの例期待される宣言
font-[400]font-weight: 400

Revision History

作成更新