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

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

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

このエントリーをはてなブックマークに追加

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;