文字を長体／平体にする方法 (font-stretch) [CSS]

font-stretch

参考：

font-stretch | MDN

使い方

参考：

font-stretch | CSS-Tricks

font-stretch Property | W3Schools

transform で変形させる

長体にする。

.condensed {
    transform-origin: left center;
    transform: scale(0.55, 1.8);
    line-height: 1.25em;
    letter-spacing: 0.1em;
    padding-top: 1.1em;
    padding-bottom: 1.1em;
}Code language: CSS (css)

見本：

平体にする。

.extended {
    transform-origin: left center;
    transform: scale(1.8, 0.65);
    line-height: 1.8em;
}Code language: CSS (css)

見本：

参考：

CSS3 でテキストを長体／平体にする方法と注意点 | Tips Note by TAM

CSS でフォントに長体／平体をかける方法と注意点 | デザイナーブリッジ

文字の横幅／高さを変更する | CMAN

transform | MDN

transform-origin | MDN

Scaling fonts with css – Stack Overflow

長体・平体

参考：

平体の意味／解説 | DTP・印刷用語集

Condensed Fonts: The Good, the Bad, the Ugly | Codrops