【font-stretch】フォントの形を幅広・幅狭にする

font-stretchプロパティでは、フォントの形状を幅広・幅狭にして表示する事ができます。

通常より幅の広い形状にするには値に「expanded」、通常より幅の狭い形状にするには「condensed」を指定して下さい。 指定するキーワードによって幅広・幅狭を段階的に変化させることができます。

ただしfont-stretchに対応しているブラウザは、Internet Explorer9とFirefox9となっています。 またcss2.1で削除されましたが、css3では新たに定義されました。

書式

  • font-stretch : ……… フォントの形状を幅広・幅狭にする

★:expanded、condensed、他、下記参照

ultra-expanded
1番幅広
extra-expanded
2番目に幅広
expanded
3番目に幅広
semi-expanded
4番目に幅広(normalより1段階幅広)
normal
通常の幅広
semi-condensed
4番目に幅狭(normalより1段階幅狭)
condensed
3番目に幅狭
extra-condensed
2番目に幅狭
ultra-condensed
1番幅狭
wider
通常の幅よりも1段階幅広にする
narrower
通常の幅よりも1段階幅狭にする

使用した時の例

.sample1 {font-stretch: condensed;}
.sample2 {font-stretch: expanded;}
<div class="sample1">幅狭なフォント</div>
<div class="sample2">幅広なフォント</div>

ブラウザ上の表示例

幅狭なフォント
幅広なフォント

※対応しているブラウザでのみ幅広・幅狭で表示されます。

対応ブラウザなどのデータ

初期値 normal 値の継承 継承する
適用可能な要素 すべての要素
メディア visual / font
対応ブラウザ Internet Explorer9 , Firefox9