font-stretch

/* キーワード値 */
font-stretch: ultra-condensed;
font-stretch: extra-condensed;
font-stretch: condensed;
font-stretch: semi-condensed;
font-stretch: normal;
font-stretch: semi-expanded;
font-stretch: expanded;
font-stretch: extra-expanded;
font-stretch: ultra-expanded;

/* パーセント値 */
font-stretch: 50%;
font-stretch: 100%;
font-stretch: 200%;

/* グローバル値 */
font-stretch: inherit;
font-stretch: initial;
font-stretch: revert;
font-stretch: unset;

このプロパティは、単一のキーワード値または単一の <percentage> 値として指定することができます。

normal

通常のフォントフェイスを指定します。

semi-condensed, condensed, extra-condensed, ultra-condensed

通常より幅の狭い (condensed) フォントフェイスを指定します。最も幅の狭いフェイスは ultra-condensed です。

semi-expanded, expanded, extra-expanded, ultra-expanded

通常より幅の広い (expanded) フォントフェイスを指定します。最も幅の広いフェイスは ultra-expanded です。

<percentage>

<percentage> 値です。このプロパティでは負の数は許可されていません。

Note: font-stretch の古いバージョンの仕様書では、このプロパティは 9 つのキーワード値のみを受け付けていました。

CSS Fonts Module Level 4 仕様書で、構文が <percentage> を受け付けるように拡張されました。これによって、文字幅がもっと連続的になるように提供することができます。 TrueType や OpenType のフォントでは、 "wdth" バリエーションが様々な幅を実装するために使用されます。

但し、<percentage> の構文はまた、すべてのブラウザーが対応しているわけではありません。詳しくはブラウザーの互換性をご覧ください。

以下の表は、キーワード値とパーセントの数値の間の対応を示しています。

フォントファミリーによっては追加のフェイスを提供しており、通常より狭い文字、 (condensed フェイス)、通常より広い文字 (expanded フェイス) などがあります。

font-stretch を使うと、そのようなフォントで condensed や expanded フェイスを選択することができます。使用しているフォントが condensed や expanded フェイスを提供していない場合は、このプロパティは効果がありません。

font-stretch で与えられた値で選択されるフェイスは、フォントがそのフェイスに対応しているかによります。与えられた値に正確に一致するフェイスがフォントに存在しない場合、値が 100% よりも小さい場合はより狭いフェイスが割り当てられ、100% と等しいか大きい場合はより広いフェイスが割り当てられます。

以下の表は 2 つの異なるフォントにおいて、 font-stretch に様々なパーセント値を提供した場合の効果を示しています。

	50%	62.5%	75%	87.5%	100%	112.5%	125%	150%	200%
Helvetica Neue
League Mono Variable

• Helvetica Neue は、既定で macOS にインストールされているもので、普通のフェイスに加えて一つの condensed のフェイスを持ちます。 font-stretch の100%より小さいすべての値は condensed のフェイスを選択し、それ以外の値は normal のフェイスを選択します。
• League Mono Variable は、 font-stretch のさまざまなパーセント値に対して、幅の連続的な範囲のようなものを提供する可変フォントです。

font-stretch = 
  normal              |
  <percentage [0,∞]>  |
  ultra-condensed     |
  extra-condensed     |
  condensed           |
  semi-condensed      |
  semi-expanded       |
  expanded            |
  extra-expanded      |
  ultra-expanded      

Note: この例は、<percentage> 値に対応しているブラウザーでのみ動作します。

• font-style
• font-weight
• 基本的なテキストとフォントの装飾