【CSS Modules】font-stretchアットルール記述子の使い方

font-stretchプロパティは、CSSの@font-faceルール内で使用され、フォントの伸縮度に関する情報を保持するプロパティです。このプロパティの主な目的は、ウェブページで利用するフォントファミリーが、どれくらいの横幅のバリエーション（例: 圧縮されたものや拡張されたもの）を持っているかを定義し、ブラウザにその情報を伝えることです。

具体的には、@font-faceルールを使ってウェブフォントを定義する際に、そのフォントファイルが持つ文字の横幅の範囲を指定します。これにより、同じフォントファミリー内で「非常に細身の（ultra-condensed）」から「非常に幅広の（ultra-expanded）」といった複数の伸縮度のフォントを定義し、それらをCSSの通常のfont-stretchプロパティ（スタイル適用用）から参照して適用できるようになります。

指定できる値には、ultra-condensed、condensed、normal、expanded、ultra-expandedのようなキーワード値や、50%から200%までのパーセンテージ値があります。100%が標準的な伸縮度であるnormalに相当します。例えば、あるフォントファミリーが50%（ultra-condensed）から200%（ultra-expanded）までの伸縮度をサポートしている場合、@font-faceルール内でfont-stretch: 50% 200%;のように範囲を指定できます。

このfont-stretchプロパティを使うことで、開発者はフォントの様々なバリエーションを柔軟に利用できるようになり、より表現豊かなデザインをウェブサイトに適用することが可能になります。ブラウザはこれらの情報をもとに、CSSスタイルで要求された適切な伸縮度のフォントを正確に選択し、表示します。

Copy
1selector {
2  font-stretch: normal;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません