字幅 (Font styling)

 
フォント
ホーム > CSS2 Note > 字幅
C2

説明

font-stretch: stretch; C2
値:  normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit
初期値:normal適用要素:すべて継承:する%値:なしメディア:ビジュアル
このプロパティは、字幅を指定します。

*1 CSS2.1仕様書において、「font-stretchプロパティ」は削除されました。
 

使用例

h1 {font-stretch:expanded}
 

字幅のキーワード

絶対キーワード C2


絶対キーワードは、字幅の狭い方から以下のように9段階に順序付けされています。
1. ultra-condensed
2. extra-condensed
3. condensed
4. semi-condensed
5. normal
6. semi-expanded
7. expanded
8. extra-expanded
9. ultra-expanded

相対キーワード C2

widerC2 現在の字幅よりも一段広い字幅を指定します。
narrowerC2 現在の字幅よりも一段狭い字幅を指定します。
 

字幅のレンダリング

<style type="text/css"><!--
div {font-family:Arial, 'MS PGothic', Osaka, sans-serif;}

.eg1 {font-stretch:ultra-condensed;}
.eg2 {font-stretch:extra-condensed;}
.eg3 {font-stretch:condensed;}
.eg4 {font-stretch:semi-condensed;}
.eg5 {font-stretch:normal;}
.eg6 {font-stretch:semi-expanded;}
.eg7 {font-stretch:expanded;}
.eg8 {font-stretch:extra-expanded;}
.eg9 {font-stretch:ultra-expanded;}

.ex10 {font-stretch:wider;}
.ex11 {font-stretch:narrower;}
--></style>

<div class="eg1">The quick brown fox jumps over the lazy dog. 色は匂へど散りぬるを我が世誰そ常ならむ</div><br>
<div class="eg2">The quick brown fox jumps over the lazy dog. 色は匂へど散りぬるを我が世誰そ常ならむ</div><br>
<div class="eg3">The quick brown fox jumps over the lazy dog. 色は匂へど散りぬるを我が世誰そ常ならむ</div><br>
<div class="eg4">The quick brown fox jumps over the lazy dog. 色は匂へど散りぬるを我が世誰そ常ならむ</div><br>
<div class="eg5">The quick brown fox jumps over the lazy dog. 色は匂へど散りぬるを我が世誰そ常ならむ</div><br>
<div class="eg6">The quick brown fox jumps over the lazy dog. 色は匂へど散りぬるを我が世誰そ常ならむ</div><br>
<div class="eg7">The quick brown fox jumps over the lazy dog. 色は匂へど散りぬるを我が世誰そ常ならむ</div><br>
<div class="eg8">The quick brown fox jumps over the lazy dog. 色は匂へど散りぬるを我が世誰そ常ならむ</div><br>
<div class="eg9">The quick brown fox jumps over the lazy dog. 色は匂へど散りぬるを我が世誰そ常ならむ</div><br>
<div class="eg10">The quick brown fox jumps over the lazy dog. 色は匂へど散りぬるを我が世誰そ常ならむ</div><br>
<div class="eg11">The quick brown fox jumps over the lazy dog. 色は匂へど散りぬるを我が世誰そ常ならむ</div>
2009/09/01現在font-stretchプロパティをサポートしているブラウザは存在しません。

*1 CSS2.1仕様書において、「font-stretchプロパティ」は削除されました。
 
関連項目: font | font-family | font-style | font-variant | font-weight | font-size | font-stretch | font-size-adjust
トップページ CSS2 Note ページトップ
 2005/09/22発行 2009/09/01更新