`font-width` アットルール記述子

利用可能性は限定的

この機能はベースラインではありません。最も広く使用されているブラウザーの一部で動作しません。

もっと多くのブラウザーがこの機能に対応してほしいですか？理由を教えてください。

完全な互換性情報を見る
もっと詳しく

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

メモ: font-width 記述子は、古い別名である font-stretch 記述子の現行の置き換えです。仕様上は font-width が推奨される名称ですが、現時点では font-stretch の方が幅広いブラウザーで対応しています。詳細については、代替の例およびブラウザーの互換性表を調べてください。

font-width は CSS の記述子で、ウェブページ作成者が @font-face アットルールで指定されたフォントのフェイスを、通常、幅狭、幅広のいずれかに指定できるようにします。

特定のフォントファミリーについて、作成者はそのフォントファミリー内の異なるスタイルに対応するさまざまなフォントフェイスをダウンロードし、font-width 記述子を用いてフォントフェイスの幅を明示的に指定できます。font-width 記述子で利用できる値は、対応する font-width プロパティの値と同じです。

構文

css

/* 単一の値 */
font-width: ultra-condensed;
font-width: extra-condensed;
font-width: condensed;
font-width: semi-condensed;
font-width: normal;
font-width: semi-expanded;
font-width: expanded;
font-width: extra-expanded;
font-width: ultra-expanded;
font-width: 50%;
font-width: 100%;
font-width: 200%;

/* 複数の値 */
font-width: 75% 125%;
font-width: condensed ultra-condensed;

font-width 記述子には、以下に示す値のいずれかを単独で指定できます。

値

normal: 通常の幅のフォントフェイスを指定します。
semi-condensed, condensed, extra-condensed, ultra-condensed: 通常より狭幅のフォントフェイスを指定します。ultra-condensed が最も狭くなります。
semi-expanded, expanded, extra-expanded, ultra-expanded: 通常より広幅のフォントフェイスを指定します。ultra-expanded が最も広くなります。
<percentage>: <percentage> 値で、50% 以上 200% 以下です。この記述子に負の値は許可されていません。

font-width の仕様の古いバージョンでは、記述子は 9 つのキーワード値のみを受け付けていましたが、CSS Fonts Level 4 における構文の拡張により <percentage> も使用できるようになりました。これにより、可変フォントで連続的に変化する文字幅を提供できます。TrueType または OpenType 可変フォントの場合、wdth バリエーションを使用してさまざまな幅を実装します。

フォントに指定された値と完全に一致する書体が存在しない場合、100% 未満の値は縮小された書体に、100% 以上の値は伸長された書体に割り当てられます。

キーワードとパーセント値の対応表

以下の表は、キーワード値とパーセント値の対応を示しています。

キーワード	パーセント値
`ultra-condensed`	50%
`extra-condensed`	62.5%
`condensed`	75%
`semi-condensed`	87.5%
`normal`	100%
`semi-expanded`	112.5%
`expanded`	125%
`extra-expanded`	150%
`ultra-expanded`	200%

可変フォント

ほとんどのフォントはキーワードの 1 つに対応する特定の幅を持ちます。しかし、可変フォントはきめ細かく変化する幅の範囲に対応できるため、デザイナーは選択した太さをより厳密に制御できます。これにはパーセント値の範囲が役立ちます。

TrueType または OpenType 可変フォントの場合、wdth バリエーションを使用して、さまざまな字幅を実装します。

アクセシビリティ

特にフォントの色のコントラスト比が低い場合、識字障害をはじめとする認知症状のある人は、幅が狭すぎるフォントを読むのが困難になる場合があります。

公式定義

DB に値が見つかりません！

形式文法

font-width = 
  auto                 |
  <'font-width'>{1,2}  

<font-width> = 
  normal              |
  <percentage [0,∞]>  |
  ultra-condensed     |
  extra-condensed     |
  condensed           |
  semi-condensed      |
  semi-expanded       |
  expanded            |
  extra-expanded      |
  ultra-expanded

例

font-width のパーセント値の範囲を指定

次の例では、League Mono^(英語) フォントを使用しています。この例では、font-width 記述子にさまざまなキーワードやパーセント値を指定することで、同じフォントファイルから異なるフォントファミリーを生成しています。

html

<p>League Mono</p>
<p>League Mono</p>
<p>League Mono</p>

css

@font-face {
  font-family: "League Mono Ultra Condensed";
  src: url("/shared-assets/fonts/LeagueMono-VF.ttf") format("truetype");
  font-width: ultra-condensed; /* 50% と同じ */
}

@font-face {
  font-family: "League Mono Normal";
  src: url("/shared-assets/fonts/LeagueMono-VF.ttf") format("truetype");
  font-width: 100%; /* normal と同じ */
}

@font-face {
  font-family: "League Mono Ultra Expanded";
  src: url("/shared-assets/fonts/LeagueMono-VF.ttf") format("truetype");
  font-width: ultra-expanded; /* 200% と同じ */
}

p:nth-child(1) {
  font-family: "League Mono Ultra Condensed", sans-serif;
}

p:nth-child(2) {
  font-family: "League Mono Normal", sans-serif;
}

p:nth-child(3) {
  font-family: "League Mono Ultra Expanded", sans-serif;
}

font-stretch による代替の提供

font-width はまだブラウザーの対応が十分ではないため、代替として古い font-stretch 記述子を記載することもできます。対応しているブラウザーが現行の記述子を使用するように、font-stretch を font-width の前に配置してください。

css

@font-face {
  font-family: "MyFont";
  src: url("my-font.woff2") format("woff2");
  font-stretch: condensed; /* font-width に対応していないブラウザー向け */
  font-width: condensed;
}

メモ: この代替パターンについては、PostCSS 用の postcss-preset-env^(英語) プラグインを使用することで自動化できます。このプラグインには、postcss-font-width-property^(英語) 変換が含まれています。これは、font-width の宣言を自動的に font-stretch に変換するものです。

仕様書

仕様書
CSS Fonts Module Level 4 # descdef-font-face-font-width

ブラウザーの互換性

MDN の改良に協力

協力方法を知る

このページは 2026年11月11日に MDN の貢献者によって最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告

font-width アットルール記述子

MDN の改良に協力

`font-width` アットルール記述子