*このページは web-dou.com のアーカイブです。(2025年 サイト統合)

WEB技術の辞書・解説・使用例

TOP > CSS >  CSS辞典 > font-stretch
font-stretch 

フォントの幅を広く・狭くする

X B! FB LINE

CSS2.1で一度廃止されました。

幅狭の形状にするには「～condensed」を指定。
幅広の形状にするには「～expanded」を指定。

狭くするパラメーター

ultra-condensed　…normalより4段階幅狭。
extra-condensed　…normalより3段階幅狭。
condensed　…normalより2段階幅狭。
semi-condensed　…normalより1段階幅狭。

広くするパラメーター

semi-expanded　…normalより1段階幅広。
expanded　…normalより2段階幅広。
extra-expanded　…normalより3段階幅広。
ultra-expanded　…normalより4段階幅広。

その他のパラメーター

normal　…標準（初期値）。
narrower　…1段階幅狭。
wider　…1段階幅広。

サンプルコード（狭く）

<p style="font-stretch:ultra-condensed;">font-stretch:ultra-condensed;</p>
<p style="font-stretch:extra-condensed;">font-stretch:extra-condensed;</p>
<p style="font-stretch:condensed;">font-stretch:condensed;</p>
<p style="font-stretch:semi-condensed;">font-stretch:semi-condensed;</p>

font-stretch:ultra-condensed;

font-stretch:extra-condensed;

font-stretch:condensed;

font-stretch:semi-condensed;


サンプルコード（広く）

<p style="font-stretch:semi-expanded;">font-stretch:semi-expanded;</p>
<p style="font-stretch:expanded;">font-stretch:expanded;</p>
<p style="font-stretch:extra-expanded;">font-stretch:extra-expanded;</p>
<p style="font-stretch:ultra-expanded;">font-stretch:ultra-expanded;</p>

font-stretch:semi-expanded;

font-stretch:expanded;

font-stretch:extra-expanded;

font-stretch:ultra-expanded;