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 |
| 正規順序 | 形式文法で定義される一意のあいまいでない順序 |
ブラウザーの対応
このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。