Title

font-stretchとは

font stretch とは次の2つの語句からなるCSSのプロパティです。

font

読み: フォント
意味: 書体

stretch

読み: ストレッチ
意味: 伸ばす

目次に戻る

font-stretchプロパティの概要

このプロパティはfontの横幅を伸び縮みさせるために使用します。

これはブラウザの対応やフォントの仕様によって、コントロールできる幅が異なります。

目次に戻る

実機サンプルとサンプルコード

font-stretchプロパティは、 font-family で指定しているfontの対応に依存することが多いので使用するfontには注意を払う必要があります。 なお、このページのサンプルでは、'Helvetica'というフォントを使用しています。

構文

セレクター{font-stretch: 設定値;}

初期値: normal

初期値のnormalは文字幅を100%で表示します。 つまり、文字幅は変更されない状態で表示されます。

span{font-stretch: normal;}

目次に戻る

キーワード値: 幅の狭いフェイス

condensed は短縮とか縮合などの意味です。 このキーワード群は文字幅を狭めて表示します。

span{font-stretch: semi-condensed;}
span{font-stretch: condensed;}
span{font-stretch: extra-condensed;}
span{font-stretch: ultra-condensed;}

目次に戻る

キーワード値: 幅の広いフェイス

expanded は広げるとか拡大などの意味です。 このキーワード群は文字幅を拡張して表示します。

span{font-stretch: semi-expanded;}
span{font-stretch: expanded;}
span{font-stretch: extra-expanded;}
span{font-stretch: ultra-expanded;}

目次に戻る

数値: 数値でフェイスを指定

数値でfont-stretchを指定する場合は、キーワードよりも細かく調整することができます。 ただし、フォントが対応していればということになりますのでフォントの選定には注意が必要です。

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%

目次に戻る