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-stretch
は font-width
プロパティの別名として維持されることになりました。
新しい font-width
という名前には、まだどのブラウザーでも対応していません。
font-stretch
は CSS のプロパティで、フォントの normal, condensed, expanded のフェイスを選択します。
試してみましょう
構文
/* <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 にも適用されます。 |
継承 | あり |
計算値 | 指定通り |
アニメーションの種類 | フォントの伸長値 |
形式文法
例
フォントの引き伸ばしパーセント値の設定
<p class="condensed">an elephantine lizard</p>
<p class="normal">an elephantine lizard</p>
<p class="expanded">an elephantine lizard</p>
@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