【CSS Modules】font-stretchプロパティの使い方
font-stretchプロパティの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
font-stretchプロパティは、テキストを表示するフォントの幅（伸縮度）を調整するCSSプロパティです。このプロパティを使用すると、フォントの文字幅を、より狭く（condensed）したり、より広く（expanded）したりすることができます。Webページにおけるテキストの視覚的なバランスや表示密度を調整する際に役立ちます。
指定できる値には、ultra-condensed や condensed のように幅を狭くするキーワード、normal のように標準の幅を保持するキーワード、そして expanded や ultra-expanded のように幅を広くするキーワードがあります。またはパーセンテージ値を指定できます。これらの値は、フォントが持つ伸縮のバリエーションの中から適切な幅を選択し、表示することを指示します。
このプロパティは、特にバリアブルフォント（可変フォント）において最大限に活用されます。バリアブルフォントは、単一のファイル内で多様な幅のスタイルを提供するため、font-stretch を使うことで、そのフォントが持つ伸縮のバリエーションを柔軟に調整できます。しかし、全てのフォントがこの伸縮機能をサポートしているわけではありません。対応していないフォントに設定しても、視覚的な変化は現れません。そのため、このプロパティを利用する際は、使用するフォントが font-stretch に対応しているかどうかを確認することが重要です。
公式リファレンス: font-stretch
構文(syntax)
1font-stretch: normal;
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません