font-width | Frontend Practical Guide

Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`font-width` 実験的				18.4
DOM API
`fontWidth` 実験的				26		26
CSS @ ルール
`font-width` 実験的 font-width CSS 記述子を使用すると、作成者は、@font-face at-rule で指定されたフォントの標準、縮小、または展開されたフェイスを指定できます。				18.4
CSS プロパティ
`condensed` 実験的				18.4
`expanded` 実験的				18.4
`extra-condensed` 実験的				18.4
`extra-expanded` 実験的				18.4
`normal` 実験的				18.4
`semi-condensed` 実験的				18.4
`semi-expanded` 実験的				18.4
`ultra-condensed` 実験的				18.4
`ultra-expanded` 実験的				18.4

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

CSS

.narrow {
  font-width: condensed;
}
.wide {
  font-width: expanded;
}
.custom { font-width: 80%; }

CSS の condensed（狭い）パターンです。

CSS の expanded（広い）パターンです。

CSS の 80%（カスタム）パターンです。