【CSS】font-stretch - 文字の横幅

CSSのfont-stretchプロパティについて解説します。

検証環境

CSS

macOS

14.1

font-stretch

font-stretchは“文字の横幅”のプロパティです。

基本構文

font-stretch: 値;

値

値は書体によって様々です。

多くの書体はキーワードや数値にって指定し、例えば、游ゴシックには次のような値があります。

値	意味
normal	通常幅
semi-condensed, condensed, extra-condensed, ultra-condensed	狭い幅
semi-expanded, expanded, extra-expanded, ultra-expanded	広い幅

また、OSやブラウザによって利用できる値が異なるケースがあることに注意してください。

サンプル

文字幅を狭く設定するサンプルです。

※ フォントにGoogle Fontsを利用しています。

sample.html

<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 {
    ___ih_hl_start
    font-stretch: semi-condensed;
    ___ih_hl_end
}
</style>

<p class="semi-condensed">CSS : Cascading Style Sheets</p>
<p>CSS : Cascading Style Sheets</p>

プレビュー