Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

概要

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

The two 'e' belong to the same fonts. One is condensed, the other normal and can be selected by 'font-stretch'.

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

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

Font-stretch results with a font having 2 faces, one condensed and one normal.

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

初期値normal
適用対象全要素. It also applies to ::first-letter and ::first-line.
継承継承する
メディアvisual
計算値指定値
アニメーションの可否可。 の値として補完します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 Fonts Module Level 3
font-stretch の定義
勧告候補  

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

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート 48.0 9.0 (9.0) 9.0 35.0 未サポート
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート 未サポート 9.0 (9.0) ? 未サポート 未サポート

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

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