【CSS】font-stretch - 文字の横幅
CSSのfont-stretchプロパティについてご紹介します。
font-stretch
font-stretchは文字の横幅を定義します。
基本構文
font-stretch: 値;値
値はキーワードまたは数値で指定できます。
定義可能な値は書体によって様々です。
例えば、游ゴシックには次のような値があります。
| 値 | 意味 |
|---|---|
| normal | 通常幅 |
| semi-condensed, condensed, extra-condensed, ultra-condensed | 狭い幅 |
| semi-expanded, expanded, extra-expanded, ultra-expanded | 広い幅 |
また、OSやブラウザによって利用できる値が異なるケースがあることに注意が必要です。
サンプル
次のサンプルは文字幅を狭く設定します。
※ フォントにGoogle Fontsを利用。
<style>
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wdth,wght@0,75..100,300..800;1,75..100,300..800&display=swap');
p {
font-family: "Open Sans";
}
.semi-condensed {
font-stretch: semi-condensed;
}
</style>
<p class="semi-condensed">text text text text text</p>
<p>text text text text text</p>
