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

記事をシェアする:
タグ:

コメントを残す

メールアドレスが公開されることはありません。

Protected by reCAPTCHA