備忘録的プログラミングリファレンス

font-stretchプロパティ

 font-stretchプロパティは、フォントの表示幅を指定するプロパティです。フォントの幅を狭める、拡げることができます。 font-stretchプロパティが機能するかしないかはフォントによりますので注意が必要です。 フォントはfont-familyプロパティまたはfontプロパティで指定します。

フォントをVerdana, Helvetica, sans-serif、フォント幅を200%に指定(Exampleを参照
font-family: Verdana, Helvetica, sans-serif;
font-stretch: ultra-expanded;

 設定値はnormalを基準にした相対値です。

ultra-condensed < extra-condensed < condensed < semi-condensed < normal < semi-expanded < expanded < extra-expanded < ultra-expanded

構文(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-condensed50%
extra-condensed62.5%
condensed75%
semi-condensed87.5%
semi-expanded112.5%
expanded125%
extra-expanded150%
ultra-expanded200%
initial初期値に戻す
inherit親エレメントのプロパティを継承

備考(Remarks)

初期値(Default value)normal
継承(Inherited)Yes
CSS AnimationYes

Example

 font-stretchの例です。指定フォントによって機能するかが決まりますのでfont-stretchの指定値どおりに変化しない場合があります。
 以下の例でのフォントはfont-stretchが機能するか否かに関係なく指定してありますので、変化が見られないかもしれません。