font-stretch：表示させるフォントの幅広や幅狭のフェイスを指定する

font-stretchプロパティの説明

font-stretchは、表示させるフォントの幅広や幅狭のフェイスを指定します。フォントには複数の文字セットが含まれており、通常よりも幅の広い（expanded）フェイスや幅の狭い（condensed）フェイスを選択できます。

font-stretchに指定できる値

normal

通常の幅を持つフォントフェイスです。これが初期値です。

condensed値

通常よりも幅の狭いフォントフェイスです。以下のようなバリエーションがあります。

• semi-condensed：やや幅が狭い
• condensed：幅が狭い
• extra-condensed：かなり幅が狭い
• ultra-condensed：とても幅が狭い

expanded値

通常よりも幅の広いフォントフェイスです。以下のようなバリエーションがあります。

• semi-expanded：やや幅が広い
• expanded：幅が広い
• extra-expanded：かなり幅が広い
• ultra-expanded：とても幅が広い

<percentage>

CSSで使用できる割合を示す値です。通常のフォントフェイスを基準に相対的な幅を示します。負の値は扱えません。

キーワードと割合の対応表

font-stretchのキーワード値と割合には以下の相関関係があります。

font-stretchの使い方とサンプル

font-stretchプロパティの構文は以下の通りです。

/* キーワード値 */
font-stretch: ultra-condensed;
font-stretch: extra-condensed;
font-stretch: condensed;
font-stretch: semi-condensed;
font-stretch: normal;
font-stretch: semi-expanded;
font-stretch: expanded;
font-stretch: extra-expanded;
font-stretch: ultra-expanded;

/* パーセント値 */
font-stretch: 50%;
font-stretch: 75%;
font-stretch: 125%;

/* グローバル値 */
font-stretch: inherit;
font-stretch: initial;
font-stretch: revert;
font-stretch: unset;

font-stretchの実例

それでは実際にfont-stretchプロパティの書き方を見ていきましょう。以下の例は、キーワード値の変化の度合いを比較するものです。可変フォントであれば横幅の違いが明確に表示されます。この内容を参考にフォントの種類を変えてみて下さい。

.samp_box {
	width: 100%;
	margin-top: 1rem;
	padding: 10px;
	background: #eee;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr;
	gap: 10px;
}
.samp_box div {
	padding: 10px;
	background: #fff;
	text-align: center;
}
div span {
	display: block;
	font-size: 2rem;
}
.fs_uc {
	grid-column: 1/2;
	grid-row: 1/2;
}.fs_uc > span {font-stretch: ultra-condensed;}
.fs_ec {
	grid-column: 2/3;
	grid-row: 1/2;
}.fs_ec > span {font-stretch: extra-condensed;}
.fs_c {
	font-stretch: condensed;
	grid-column: 3/4;
	grid-row: 1/2;
}.fs_c > span {font-stretch: condensed;}
.fs_sc {
	grid-column: 4/5;
	grid-row: 1/2;
}.fs_sc > span {font-stretch: semi-condensed;}
.fs_n {
	grid-column: 1/5;
	grid-row: 2/3;
}.fs_n > span {font-stretch: normal;}
.fs_se {
	grid-column: 1/2;
	grid-row: 3/4;
}.fs_se > span {font-stretch: semi-expanded;}
.fs_e {
	grid-column: 2/3;
	grid-row: 3/4;
}.fs_e > span {font-stretch: expanded;}
.fs_ee {
	grid-column: 3/4;
	grid-row: 3/4;
}.fs_ee > span {font-stretch: extra-expanded;}
.fs_ue {
	grid-column: 4/5;
	grid-row: 3/4;
}.fs_ue > span {font-stretch: ultra-expanded;}

<section class="samp_box">
	<div class="fs_uc">ultra-condensed<span>e</span></div>
	<div class="fs_ec">extra-condensed<span>e</span></div>
	<div class="fs_c">condensed<span>e</span></div>
	<div class="fs_sc">semi-condensed<span>e</span></div>
	<div class="fs_n">normal<span>e</span></div>	
	<div class="fs_se">semi-expanded<span>e</span></div>
	<div class="fs_e">expanded<span>e</span></div>
	<div class="fs_ee">extra-expanded<span>e</span></div>
	<div class="fs_ue">ultra-expanded<span>e</span></div>
</section>