font-stretch

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2017.

メモ: font-stretch プロパティは仕様書において font-width に名前が変更されましたfont-stretchfont-width プロパティの別名として維持されることになりました。 新しい font-width という名前には、まだどのブラウザーでも対応していません。

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

試してみましょう

構文

css
/* <font-stretch-css3> キーワード値 */
font-stretch: normal;
font-stretch: ultra-condensed;
font-stretch: extra-condensed;
font-stretch: condensed;
font-stretch: semi-condensed;
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: revert-layer;
font-stretch: unset;

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

normal

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

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

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

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

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

<percentage>

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

キーワードと数値の対応

以下の表は、 <font-stretch-css3> キーワード値とパーセントの数値の対応を示しています。

キーワード パーセント値
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 に様々なパーセント値を提供した場合の効果を示しています。

  • Anek Malayalam は 75% から 125% の幅に対応している可変の Google フォントです。この範囲を下回る値と上回る値では、最も一致するフォントが選択されます。
  • Inconsolata は、 50% から 200% まで連続的に幅を変化させることができる可変フォントです。

公式定義

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

形式文法

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

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

html
<p class="condensed">an elephantine lizard</p>
<p class="normal">an elephantine lizard</p>
<p class="expanded">an elephantine lizard</p>
css
@font-face {
  src: url("https://mdn.github.io/shared-assets/fonts/LeagueMono-VF.ttf");
  font-family: "LeagueMonoVariable";
  font-style: normal;
  font-stretch: 1% 500%; /* Required by Chrome */
}

p {
  font:
    1.5rem "LeagueMonoVariable",
    sans-serif;
}

.condensed {
  font-stretch: 50%;
}

.normal {
  font-stretch: 100%;
}

.expanded {
  font-stretch: 200%;
}

仕様書

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

ブラウザーの互換性

BCD tables only load in the browser

関連情報