Widely available YES。主要ブラウザで広く対応済み。本番利用を推奨。

font-stretch

非推奨;: この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

メモ: font-stretch プロパティは仕様書において font-width に名前が変更されました。 font-stretch は font-width プロパティの別名として維持されることになりました。 新しい font-width という名前は、まだどのブラウザーでも対応していません。

font-stretch は CSS のプロパティで、フォントの normal, condensed, expanded のフェイスを選択します。

フォント幅字幅制御

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
font-stretch
60
12
9
11
60
11
CSS @ ルール
font-stretch

font-stretch は CSS の記述子で、ウェブページ作成者が @font-face アットルールで定義されているフォントが通常か、幅狭か、幅広かを指定できるようにします。
62
17
62
10.1
62
10.3
CSS プロパティ
condensed
60
12
9
11
60
11
expanded
60
12
9
11
60
11
extra-condensed
60
12
9
11
60
11
extra-expanded
60
12
9
11
60
11
normal
60
12
9
11
60
11
percentage

`<パーセント>` 構文
62
18
61
11.1
62
11.3
semi-condensed
60
12
9
11
60
11
semi-expanded
60
12
9
11
60
11
ultra-condensed
60
12
9
11
60
11
ultra-expanded
60
12
9
11
60
11
font-width keyword values

短縮表現での「font-width」キーワード値
60
79
43
11
60
11
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
実装メモ
  • このプロパティが機能する前に、`font-stretch` 宣言を `@font-face` に追加する必要があります。
注釈 1件
実装メモ
  • このプロパティが機能する前に、`font-stretch` 宣言を `@font-face` に追加する必要があります。

基本構文

CSS 
.condensed {
  font-stretch: condensed;
}
.wide {
  font-stretch: 125%;
}
.narrow { font-stretch: 75%; }

ライブデモ

condensed（75%）

CSS Condensed(75%) demo.

プレビュー全画面表示

normal（100%）

CSS Normal(100%) demo.

プレビュー全画面表示

expanded（125%）

CSS Expanded(125%) demo.

プレビュー全画面表示

実務での使いどころ

  • 限られたスペースでのテキスト表示

    ナビゲーションバーやサイドバーなど狭い領域で、condensedフォントを使用してテキストを圧縮表示します。

注意点

  • 指定した幅のフォントフェイスがフォントファミリーに含まれていない場合、ブラウザが近似値を選択するため、意図した表示にならない場合があります。

アクセシビリティ

  • 過度に圧縮されたフォント幅はテキストの可読性を低下させるため、本文テキストでは通常幅を維持してください。

参考リンク