font-width
Experimental: これは実験的な技術です
本番環境で使用する前に、ブラウザーの互換性一覧表を注意深く確認してください。
注: `font-width` プロパティは、`font-stretch` の現代的な代替であり、`font-stretch` はレガシーな別名です。`font-width` は仕様で推奨される名前ですが、`font-stretch` は現在、より幅広いブラウザーでサポートされています。詳細については、フォールバックの例とブラウザーの互換性一覧表を確認してください。
`font-width` CSS プロパティは、フォントから標準、凝縮、または拡張された字面を選択します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| 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 | | |
基本構文
CSS
.narrow {
font-width: condensed;
}
.wide {
font-width: expanded;
}
.custom { font-width: 80%; }ライブデモ
実務での使いどころ
-
狭小スペースでのテキスト調整
モバイルUIの限られたスペースで、condensed字幅を使用してテキストの収まりを改善します。
注意点
- Safari以外では未対応のため、当面はfont-stretchプロパティの使用を推奨します。両方指定する場合はfont-widthが優先されます。
アクセシビリティ
- 過度な字幅の圧縮はテキストの可読性を損なうため、本文テキストでは通常幅を維持してください。