font-stretch プロパティ
font-stretch プロパティは、フォントの表示幅を指定するプロパティです。フォントの幅を狭める、拡げることができます。 font-stretch プロパティが機能するかしないかはフォントによりますので注意が必要です。 フォントはfont-familyプロパティまたはfontプロパティで指定します。
font-family: Verdana, Helvetica, sans-serif;
font-stretch: ultra-expanded;
設定値はnormalを基準にした相対値です。
ultra-condensed < extra-condensed < condensed < semi-condensed < normal ( default ) < semi-expanded < expanded < extra-expanded < ultra-expanded
ページ内 Index
構文(Syntax)
CSS
font-stretch: normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | initial | inherit ;
DOM ( JavaScript )
String = object.style.fontStretch;
object.style.fontStretch=" normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | initial | inherit ";
値（Values）
| Value | 摘要 |
|---|---|
| normal | 初期値（default値）、100% |
| ultra-condensed | 50% |
| extra-condensed | 62.5% |
| condensed | 75% |
| semi-condensed | 87.5% |
| semi-expanded | 112.5% |
| expanded | 125% |
| extra-expanded | 150% |
| ultra-expanded | 200% |
| initial | 初期値に戻す |
| inherit | 親エレメントのプロパティを継承 |
備考（Remarks）
| 初期値（Default value） | normal |
| 継承（Inherited） | Yes |
| CSS Animation | Yes |
Example
font-stretch の例です。指定フォントによって機能するかが決まりますのでfont-stretchの指定値どおりに変化しない場合があります。
以下の例でのフォントは font-stretch が機能するか否かに関係なく指定してありますので、変化が見られないかもしれません。
関連 CSS プロパティ
関連するプロパティに以下があります。
| font | fontに関するプロパティの一括指定 |
| font-family | フォントファミリ |
| font-feature-settings | OpenTypeフォントのもつ文字体裁機能を指定 |
| font-kerning | フォント間の字詰め（文字間隔） |
| font-size | 大きさ |
| font-stretch | フォントの表示幅 |
| font-style | 文字のスタイル |
| font-variant | スモールキャップの有無 |
| font-variant-caps | スモールキャップの有無 |
| font-weight | 太さ |
テキストに関するプロパティには以下があります。
| プロパティ | 概要 |
|---|---|
| line-height | 行間 |
| text-align、vertical-align | テキストの配置操作 |
| background{ linear-gradient() } | マーカーでラインを引いたような装飾 |