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

Baseline

広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2018年9月以降、すべてのブラウザーで利用可能です。

メモ: font-stretch 記述子は CSS Fonts specification において font-width に改名されました。互換性を維持するため、この仕様書では font-stretch を font-width 記述子の古い別名として残しています。

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

ある特定のフォントファミリーについて、作成者はそのフォントファミリー内の異なるスタイルに対応するさまざまなフォントフェイスをダウンロードし、font-stretch 記述子を用いてフォントフェイスの伸縮を明示的に指定することができます。

構文

css

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

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

font-stretch プロパティは以下にリストとして示されている値のいずれかを使用して記述されます。

値

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

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

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

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

以下の表は、キーワード指定時と <percentage> 指定時の字幅の違いを示しています。

キーワード	パーセント値
`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 バリエーションを使用して、さまざまな字幅を実装します。

アクセシビリティ

特にフォントのコントラストカラー比が低い場合、識字障害をはじめとする認知症状のある人は凝縮しすぎたフォントを読むのが困難になる場合があります。詳細は以下をご覧ください。

公式定義

関連するアット規則	`@font-face`
初期値	`normal`
計算値	指定通り

形式文法

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-stretch のパーセント値の範囲を指定

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

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-stretch: ultra-condensed; /* 50% と同じ */
}

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

@font-face {
  font-family: "League Mono Ultra Expanded";
  src: url("/shared-assets/fonts/LeagueMono-VF.ttf") format("truetype");
  font-stretch: 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;
}

仕様書

仕様書
CSS Fonts Module Level 4 # font-stretch-desc

ブラウザーの互換性

MDN の改良に協力

協力方法を知る

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

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

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

MDN の改良に協力

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