文字を長体・平体にする方法

font-stretch

参考

font-stretch | CSS-Tricks

CSS font-stretch property | W3Schools

transform で変形させる

長体にする。

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;

見本

これは長体の見本です。
これは長体の見本です。

平体にする。

transform-origin: left center;
transform: scale(1.8, 0.65);
line-height: 1.8em;

見本

これは平体の見本です。
これは平体の見本です。

参考

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

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

文字の横幅・高さを変更する CSS 作成 | CMAN

transform | MDN

transform-origin | MDN

Scaling fonts with css – Stack Overflow

長体・平体

参考

平体 (文字) の意味・解説 | DTP・印刷用語集

Condensed fonts: The good, the bad, the ugly | Codrops

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です