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

font-width

font-stretchプロパティの新しい名称として提案されたプロパティです。フォントの字幅を制御する機能はfont-stretchと同一で、condensedからexpandedまでのキーワードやパーセンテージ指定が可能です。プロパティ名がより直感的に機能を表現していますが、現在のブラウザサポートは非常に限定的です。

フォント幅字幅制御

概要

font-stretchプロパティの新しい名称として提案されたプロパティです。フォントの字幅を制御する機能はfont-stretchと同一で、condensedからexpandedまでのキーワードやパーセンテージ指定が可能です。プロパティ名がより直感的に機能を表現していますが、現在のブラウザサポートは非常に限定的です。

対応ブラウザ

デスクトップ

Chrome 未対応
Edge 未対応
Safari 18.4+
Firefox 未対応

基本構文

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

実務での使いどころ

  • 狭小スペースでのテキスト調整

    モバイルUIの限られたスペースで、condensed字幅を使用してテキストの収まりを改善します。

注意点

  • Safari以外では未対応のため、当面はfont-stretchプロパティの使用を推奨します。両方指定する場合はfont-widthが優先されます。

アクセシビリティ

  • 過度な字幅の圧縮はテキストの可読性を損なうため、本文テキストでは通常幅を維持してください。

参考リンク