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が優先されます。
アクセシビリティ
- 過度な字幅の圧縮はテキストの可読性を損なうため、本文テキストでは通常幅を維持してください。