font-stretchとは
- font stretch とは次の2つの語句からなるCSSのプロパティです。
- font
- 読み: フォント
意味: 書体 - stretch
- 読み: ストレッチ
意味: 伸ばす
font-stretchプロパティの概要
このプロパティはfontの横幅を伸び縮みさせるために使用します。
これはブラウザの対応やフォントの仕様によって、コントロールできる幅が異なります。
実機サンプルとサンプルコード
font-stretchプロパティは、 font-family で指定しているfontの対応に依存することが多いので使用するfontには注意を払う必要があります。 なお、このページのサンプルでは、'Helvetica'というフォントを使用しています。
構文
セレクター{font-stretch: 設定値;}
初期値: normal
初期値のnormalは文字幅を100%で表示します。 つまり、文字幅は変更されない状態で表示されます。
This is a sample.normal; = 100%span{font-stretch: normal;}
キーワード値: 幅の狭いフェイス
condensed は短縮とか縮合などの意味です。 このキーワード群は文字幅を狭めて表示します。
This is a sample.semi-condensed; = 87.5%This is a sample.condensed; = 75%
This is a sample.extra-condensed; = 62.5%
This is a sample.ultra-condensed; = 50%
span{font-stretch: semi-condensed;}
span{font-stretch: condensed;}
span{font-stretch: extra-condensed;}
span{font-stretch: ultra-condensed;}
キーワード値: 幅の広いフェイス
expanded は広げるとか拡大などの意味です。 このキーワード群は文字幅を拡張して表示します。
This is a sample.semi-expanded; = 112.5%This is a sample.expanded; = 125%
This is a sample.extra-expanded; = 150%
This is a sample.ultra-expanded; = 200%
span{font-stretch: semi-expanded;}
span{font-stretch: expanded;}
span{font-stretch: extra-expanded;}
span{font-stretch: ultra-expanded;}
数値: 数値でフェイスを指定
数値でfont-stretchを指定する場合は、キーワードよりも細かく調整することができます。 ただし、フォントが対応していればということになりますのでフォントの選定には注意が必要です。
This is a sample. = 50%This is a sample. = 100%
This is a sample. = 200%
span{font-stretch: 50%;}
span{font-stretch: 100%;}
span{font-stretch: 200%;}
グローバル値
font-stretchプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。
- inheritは親要素の値の継承を促します。
- initialは値を初期値のnormalに戻します。
-
unsetは継承の初期値に戻します。
※このプロパティは親要素の値を継承するのが基本なので、inheritと同じ働きをします。
span{font-stretch: グローバル値;}
補足説明
- すべての要素に適用可能
- 親要素の値を継承する
まとめ
ここでは、検証としてブロック要素とインライン要素に同じCSSを設定した場合の適用状態が確認できます。 コードの部分をクリックすると、サンプルにCSSが反映されます。
font-stretch: ultra-condensed;
= 50%
font-stretch: extra-condensed;
= 62.5%
font-stretch: condensed;
= 75%
font-stretch: semi-condensed;
= 87.5%
font-stretch: normal;
= 100%
font-stretch: semi-expanded;
= 112.5%
font-stretch: expanded;
= 125%
font-stretch: extra-expanded;
= 150%
font-stretch: ultra-expanded;
= 200%
This is a sample : ブロック要素