| 項 目 | 説 明 |
|---|---|
| 記述形式 | セレクタ {font-stretch: 値 } |
| 値 の形式 | normal，ultra-condensed，extra-condensed，condensed，semi-condensed， semi-expanded，expanded，extra-expanded，ultra-expanded |
| 初 期 値 | normal |
| 対応ブラウザー | C?+ / e?+ / Fx?+ / Op?+ / Ch?+ / Sa? |
| 適用可能な要素 | すべての要素 |
| 継 承 | する |
font-stretchプロパティ は，フォント幅の拡大・縮小 を指定します。
指定できる値の形式は，以下の通りです。
| 値 | 説 明 |
|---|---|
| normal | 標準のフォント幅で拡大・縮小はしません。 |
| ultra-condensed | フォント幅の最大限の縮小をします。 |
| extra-condensed | ultra-condensed と condensed の中間のフォント幅にします。 |
| condensed | フォント幅の標準的な縮小をします。 |
| semi-condensed | normal と condensed の中間のフォント幅にします。 |
| semi-expanded | normal と expanded の中間のフォント幅にします。 |
| expanded | フォント幅の標準的な拡大をします。 |
| extra-expanded | ultra-expanded と expanded の中間のフォント幅にします。 |
| ultra-expanded | フォント幅の最大限の拡大をします。 |
値には、9段階のキーワードが用意されていますが、ほとんどのフォントは「condensed」「normal」「expanded」の3段階しか反映されません。
| HTMLソース | |
|---|---|
| CSS <head> ～ </head> |
<style type="text/css">
<!--
div.sample {
width: 20em;
margin:10px;
font-size:1em;
}
.fstretch1 {font-stretch: ultra-condensed;}
.fstretch2 {font-stretch: extra-condensed;}
.fstretch3 {font-stretch: condensed;}
.fstretch4 {font-stretch: semi-condensed;}
.fstretch5 {font-stretch: normal;}
.fstretch6 {font-stretch: semi-expanded;}
.fstretch7 {font-stretch: expanded;}
.fstretch8 {font-stretch: extra-expanded;}
.fstretch9 {font-stretch: ultra-expanded;}
-->
</style> |
| HTML <body> ～ </body> |
<div class="sample fstretch1">Text ← Text → Text: ultra-condensed </div> <div class="sample fstretch2">Text ← Text → Text: extra-condensed </div> <div class="sample fstretch3">Text ← Text → Text: condensed </div> <div class="sample fstretch4">Text ← Text → Text: semi-condensed </div> <div class="sample fstretch5">Text ← Text → Text: normal </div> <div class="sample fstretch6">Text ← Text → Text: semi-expanded </div> <div class="sample fstretch7">Text ← Text → Text: expanded </div> <div class="sample fstretch8">Text ← Text → Text: extra-expanded </div> <div class="sample fstretch9">Text ← Text → Text: ultra-expanded </div> |
| ブラウザー 表示例 （現状では主要ブラウザーで指定が反映されません） |
|---|
Text ← Text → Text: ultra-condensed
Text ← Text → Text: extra-condensed
Text ← Text → Text: condensed
Text ← Text → Text: semi-condensed
Text ← Text → Text: normal
Text ← Text → Text: semi-expanded
Text ← Text → Text: expanded
Text ← Text → Text: extra-expanded
Text ← Text → Text: ultra-expanded |