font-stretchプロパティ

値

次のような値を設定することができます。

• ultra-condensed – 通常から50%の幅で表示されます。
• extra-condensed – 通常から62.5%の幅で表示されます。
• condensed – 通常から75%の幅で表示されます。
• semi-condensed – 通常から87.5%の幅で表示されます。
• normal – 初期値。通常の幅(100%)で表示されます。
• semi-expanded – 通常から112.5%の幅で表示されます。
• expanded – 通常から125%の幅で表示されます。
• extra-expanded – 通常から150%の幅で表示されます。
• ultra-expanded – 通常から200%の幅で表示されます。

パターン1

それぞれの値を指定した例です。
2018年12月現在、主要ブラウザでは表示が対応していないようです。

CSSコード例

.sample_css1 .text1 {
	font-stretch: ultra-condensed;
}
.sample_css1 .text2 {
	font-stretch: extra-condensed;
}
.sample_css1 .text3 {
	font-stretch: condensed;
}
.sample_css1 .text4 {
	font-stretch: semi-condensed;
}
.sample_css1 .text5 {
	font-stretch: normal;
}
.sample_css1 .text6 {
	font-stretch: semi-expanded;
}
.sample_css1 .text7 {
	font-stretch: expanded;
}
.sample_css1 .text8 {
	font-stretch: extra-expanded;
}
.sample_css1 .text9 {
	font-stretch: ultra-expanded;
}

表示例：

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。