font-stretch
フォントの横幅（字幅）を制御するプロパティです。ultra-condensedからultra-expandedまでのキーワード、または50%〜200%のパーセンテージで指定できます。バリアブルフォントのwidth軸に対応し、デザインに応じた字幅の調整が可能です。フォントファミリーに該当する幅のフォントフェイスがない場合は、最も近い幅が選択されます。
概要
フォントの横幅（字幅）を制御するプロパティです。ultra-condensedからultra-expandedまでのキーワード、または50%〜200%のパーセンテージで指定できます。バリアブルフォントのwidth軸に対応し、デザインに応じた字幅の調整が可能です。フォントファミリーに該当する幅のフォントフェイスがない場合は、最も近い幅が選択されます。
対応ブラウザ
デスクトップ
Chrome 62+
Edge 79+
Safari 11.1+
Firefox 62+
モバイル
Chrome Android 62+
Safari iOS 11.3+
Firefox Android 62+
基本構文
CSS
.condensed {
font-stretch: condensed;
}
.wide {
font-stretch: 125%;
}
.narrow { font-stretch: 75%; }実務での使いどころ
-
限られたスペースでのテキスト表示
ナビゲーションバーやサイドバーなど狭い領域で、condensedフォントを使用してテキストを圧縮表示します。
注意点
- 指定した幅のフォントフェイスがフォントファミリーに含まれていない場合、ブラウザが近似値を選択するため、意図した表示にならない場合があります。
アクセシビリティ
- 過度に圧縮されたフォント幅はテキストの可読性を低下させるため、本文テキストでは通常幅を維持してください。