font-stretch プロパティ
最終更新：2026-09-13
font-stretch font-stretch プロパティ
font-stretch プロパティは、フォントの凝縮（condensed）または拡張（expanded）された変異体を選択します。ultra-condensed から ultra-expanded まで 9 段階あります。実際に一致する幅の変異体をフォントが備えている場合にのみ効果があります。
| カテゴリ | |
|---|---|
| 初期値 | normal |
| 継承 | はい |
| 適用対象 | |
| アニメーションタイプ | |
| CSS バージョン | CSS3 |
| 状態 | 標準 |
📝 構文
font-stretch: normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | <percentage>;⚙️ 値
| 値 | タイプ | 説明 |
|---|---|---|
normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | キーワード | フォントの伸縮レベル |
<percentage> | タイプ | 伸縮のパーセンテージ |
▶ 例
以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：
🌐 ブラウザーサポート
| ブラウザー |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| font-stretch | ✓ v57 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| すべての主要ブラウザーでサポート | |||||
注意： 中国語フォントで幅の変異体を持つものはほぼなく、このプロパティは中国語に対して事実上無効であり、主に欧文タイポグラフィや可変フォントで使われます。
❓ よくある質問
Qfont-stretch プロパティは CSS の letter-spacing とどう違いますか？
Afont-stretch はグリフ自体の幅の比率（condensed / expanded）を変更し、フォントが一致する幅の変異体や可変フォントの軸を備えている必要があります。letter-spacing は文字間にスペースを加えるだけでグリフは変わりません。文字を狭く見せたいなら font-stretch、余白を持たせたいなら letter-spacing を使います。
Qfont-stretch プロパティは中国語の表示に影響しますか？
A基本的にありません。ほぼすべての中国語フォントは、condensed や expanded の変異体のない通常幅のグリフ一式のみを備えているため、ブラウザはこのプロパティを無視します。主に欧文や可変フォントで有用です。
QCSS で font-stretch プロパティを使ってテキストを狭く見せるには？
Aフォントが幅の変異体を備えているなら、font-stretch: condensed を使います。transform: scaleX(0.9) で圧縮することもできますが、グリフが歪みます。可変フォントは正確な幅のパーセンテージを受け付け、例えば font-stretch: 75% です。
🏷️ 関連プロパティ
💡 関連事例
📚 関連チュートリアル
