これは実験段階の機能です。
この機能は複数のブラウザで開発中の状態にあります。各ブラウザで用いるために、適切なベンダー接頭辞が必要な場合があります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザの将来のバージョンで変更になる可能性があることに注意してください。
概要
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 は何も視覚的な変化をもたらしません:
- 初期値
normal - 適用対象 全要素
- 継承 継承する
- メディア
visual - 計算値 指定値
- アニメーションの可否 可。font stretch の値として補完します。
- 正規順序 形式文法で定義される一意のあいまいでない順序
構文
形式文法: normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-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: inherit
値
-
normal - 通常のフォントフェイスを指定します。
-
semi-condensed,condensed,extra-condensed,ultra-condensed - 通常より幅の狭い（condensed）フォントフェイスを指定します。最も幅の狭いフェイスは ultra-condensed です。
-
semi-expanded,expanded,extra-expanded,ultra-expanded - 通常より幅の広い（expanded）フォントフェイスを指定します。最も幅の広いフェイスは ultra-expanded です。
補間
font-stretch 値は離散値で補間されます。順番に並べられた値が等間隔の実数であるかのように、補間が行われます。補間結果はもっとも近いものに丸められます。ちょうど中間値の場合は幅の広い側の値に丸められます。
例
h1 { font-stretch: extra-expanded }
p { font-stretch: condensed }
仕様
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| CSS Fonts Module Level 3 | 草案 |
CSS プロパティ font-stretch は初め CSS 2 で定義されましたが、CSS 2.1 で実装経験不足のため外されました。CSS 3 では新しく定義されました。
ブラウザ実装状況
| 機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| 基本サポート | 未サポート | 9.0 (9.0) | 9.0 | 未サポート | 未サポート |
| 機能 | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| 基本サポート | 未サポート | 9.0 (9.0) | ? | 未サポート | 未サポート |
関連情報
- フォント関連 CSS プロパティ:
font、font-family、font-size、font-size-adjust、font-stretch、font-style、font-variant、font-weight、@font-face