font-stretch

font-stretchCSS のプロパティで、フォントの normal, condensed, expanded のフェイスを選択します。

試してみましょう

構文

/* キーワード値 */
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> の構文はまた、すべてのブラウザーが対応しているわけではありません。詳しくはブラウザーの互換性をご覧ください。

キーワードと数値の対応

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

キーワード パーセント値
ultra-condensed 50%
extra-condensed 62.5%
condensed 75%
semi-condensed 87.5%
normal 100%
semi-expanded 112.5%
expanded 125%
extra-expanded 150%
ultra-expanded 200%

解説

フォントファミリーによっては追加のフェイスを提供しており、通常より狭い文字、 (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 のさまざまなパーセント値に対して、幅の連続的な範囲のようなものを提供する可変フォントです。

公式定義

初期値normal
適用対象すべての要素。 ::first-letterおよび::first-line にも適用されます。
継承あり
計算値指定通り
アニメーションの種類フォントの伸長値

形式文法

<font-stretch-absolute>

ここで
<font-stretch-absolute> = normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | <percentage>

フォントの引き伸ばしパーセント値の設定

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

仕様書

Specification
CSS Fonts Module Level 4
# font-stretch-prop

Note: CSS プロパティ font-stretch は初め CSS 2 で定義されましたが、CSS 2.1 で実装経験不足のため外されました。CSS 3 では新しく定義されました。

ブラウザーの互換性

BCD tables only load in the browser

関連情報