font-stretch CSS プロパティは、フォントの 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: 0%;
font-stretch: 50%;
font-stretch: 200%;

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

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

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

一部のサンプルフォントでこのプロパティの効果を見るには、以下のフォントフェイスの選択をご覧ください。

構文

このプロパティは、単一のキーワード値又は単一の <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 の古いバージョンの仕様書では、このプロパティは9つのキーワード値のみを受け付けていました。 CSS Fonts Level 4 で、構文が <percentage> を受け付けるように拡張されました。これによって、文字幅がもっと連続的になるように提供することができます。 TrueType や OpenType のフォントでは、 "wdth" バリエーションが様々な幅を実装するために使用されます。

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

キーワードと数値の対応

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

キーワード パーセント値
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%

フォントフェイスの選択

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

以下の表は二つの異なるフォントにおいて、 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-absolute>

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

パーセント値の構文

なお、この例は <percentage> 値に対応したブラウザーのみで動作します。

HTML

<div class="container">
    <p class="condensed">an elephantine lizard</p>
    <p class="normal">an elephantine lizard</p>
    <p class="expanded">an elephantine lizard</p>
</div>

CSS

/*
This example uses the League Mono Variable font, developed by
Tyler Finck (https://www.tylerfinck.com/) and used here under
the terms of the SIL Open Font License, Version 1.1:
http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web
*/

@font-face {
  src: url('https://mdn.mozillademos.org/files/16014/LeagueMonoVariable.ttf');
  font-family:'LeagueMonoVariable';
  font-style: normal;
}

.container {
  border: 10px solid #f5f9fa;
  padding: 0 1rem;
  font: 1.5rem 'LeagueMonoVariable', sans-serif;
}

.condensed {
  font-stretch: 50%;
}

.normal {
  font-stretch: 100%;
}

.expanded {
  font-stretch: 200%;
}

結果

仕様書

仕様書 状況 備考
CSS Fonts Module Level 4
font-stretch の定義
草案 可変フォントに <percentage> の構文を追加。
CSS Fonts Module Level 3
font-stretch の定義
勧告候補 初回定義

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

初期値normal
適用対象すべての要素。 ::first-letter and ::first-line にも適用されます。
継承あり
メディア視覚
計算値指定値
アニメーションの種類font stretch
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 60Edge 完全対応 12Firefox 完全対応 9IE 完全対応 9Opera 完全対応 47Safari 完全対応 11WebView Android 完全対応 60Chrome Android 完全対応 60Edge Mobile 完全対応 12Firefox Android 完全対応 9Opera Android 完全対応 47Safari iOS ? Samsung Internet Android ?
<percentage> syntaxChrome 未対応 なしEdge ? Firefox 完全対応 61IE 未対応 なしOpera ? Safari ? WebView Android 未対応 なしChrome Android 未対応 なしEdge Mobile ? Firefox Android 完全対応 61Opera Android 未対応 なしSafari iOS ? Samsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, yyss, fscholz, Sebastianz, ethertank, sosleepy
最終更新者: mfuji09,