font-stretch

概要

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

このプロパティは伸縮などのフォントのジオメトリの変更は行いません。font-feature-settings や font-variant と同じく、フォントが複数のフェイスを提供していれば、もっとも適切なフェイスを選ぶだけです。

註記: フォントが複数のフェイスを提供していれば、font-stretch プロパティの値に最もフィットするものが選ばれます。例えば Mac OS の "Helvetica Neue" フォントは一般的な Bold、Regular、Italic、BoldItalic フェイスに加えて、圧縮したフェイスの第2セット（これは condensed です）を提案しています。 font-stretch をサポートしているブラウザは 値 ultra-condensed から semi-condensed には condensed フェイスを使い、それ以外（normal ととすべての expanded 値）には normal フェイスを使います。

Mac OS のデフォルトフォント "Times New Roman" のように condensed や expanded フェイスを持たない場合には、適したフェイス以外を使おうとしないので、font-stretch は何も視覚的な変化をもたらしません:

構文

/* キーワード値 */
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: inherit;
font-stretch: initial;
font-stretch: unset;

値

normal

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

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

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

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

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

補間

font-stretch 値は離散値で補間されます。順番に並べられた値が等間隔の実数であるかのように、補間が行われます。補間結果はもっとも近いものに丸められます。ちょうど中間値の場合は幅の広い側の値に丸められます。

形式文法

normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded

例

HTML

<div class="stretch"> This is text with the font stretched</div>
<div class="condensed"> This is text with the font condensed</div>

CSS

.stretch {font-stretch: extra-expanded;} 
.condensed {font-stretch: condensed;}

結果

仕様

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

ブラウザ実装状況