font-stretch

草案
このページは完成していません。

font-stretch は CSS の記述子で、ウェブページ作成者が @font-face 規則で定義されているフォントが通常か、幅狭か、幅広かを指定できるようにします。

ある特定のフォントについて、作成者は同じフォントの異なるスタイルに対応するさまざまなフォントフェイスをダウンロードでき、font-stretch 記述子を用いることでフォントフェイスのストレッチを明示的に指定します。CSS 記述子の値は、対応するフォントプロパティの値と同じです。

関連する @規則@font-face
初期値normal
計算値指定値

構文

/* 単一の値 */
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: 50%;
font-stretch: 100%;
font-stretch: 200%;

/* 複数値 */
font-stretch: 75% 125%;
font-stretch: condensed ultra-condensed;;

font-weight プロパティは以下にリストとして示されている値のいずれかを使用して記述されます。

normal
普通の文字幅。
semi-condensed, condensed, extra-condensed, ultra-condensed
通常より幅狭な字を示します。semi-condenced が regular に比べてわずかに幅が細い程度で、そこから右 (ultra-condenced) に向かうにつれてさらに細くなっていきます。
semi-expanded, expanded, extra-expanded, ultra-expanded
通常より幅広な字を示します。semi-rxpanded がわずかに広い程度で、そこから右 (ultra-expanded) に向かうにつれてさらに広くなっていきます。
<percentage>
50% から 200% の <percentage> 値で示します。このプロパティに負の値は許可されていません。

font-stretch の旧バージョンではプロパティは上記の <percentage> 以外の 9 つのキーワードのみを許可していましたが、CSS Fonts Level 4 における構文の拡張により<percentage> も使用できるようになりました。これにより、バリアブルフォントは連続した文字幅のようなものを提供できます。TrueType または OpenType バリアブルフォント (後述) の場合、"wdth" バリエーションを使用してさまざまな幅を実装できます。

フォントが指定された値と完全に一致するフェイスが提供されない場合、100% 未満の値は幅狭に現像され、100% 以上の値は幅広に現像されます。

キーワードとパーセント値の対照表

以下の表はキーワード指定の際の字幅と <percentage> 指定時の幅の違いを示します:

キーワード パーセント値
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%

バリアブル (可変) フォント

ほとんどのフォントはキーワードの 1 つに対応する特定の幅を持ちます。しかしながら、バリアブル (可変) フォントと呼ばれる一部のフォントはきめ細かい精度で一連の伸縮が可能になっています。これにより、デザイナーは選択したウェイトをより厳密に制御できます。 これにはパーセント範囲が役立ちます。

TrueType または OpenType 可変フォントの場合、"wdth" バリエーションを使用して、さまざまなグリフ幅を実装します。

以下の例が動作するには、CSS Fonts Level 4 構文をサポートするブラウザーが必要です。この構文では font-weight は 1 から 1000 の任意の数値にできます。

形式文法

<font-stretch-absolute>{1,2}

where
<font-stretch-absolute> = normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | <percentage>

以下はローカルの Open Sans 書体をインポートし、normal、semi-condensed、ならびに semi-expanded を使用できるようにするものです。

@font-face {
  font-family: "Open Sans";
  src: local("Open Sans") format("woff2"),
       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
  font-stretch: 87.5% 112.5%;
}

アクセシビリティの考慮事項

特にフォントのコントラストカラー比が低い場合、識字障害をはじめとする認知症状のある人は凝縮しすぎたフォントを読むのが困難になる場合があります。詳細は以下をご覧ください。

仕様書

仕様書 状態 備考
CSS Fonts Module Level 4
font-stretch の定義
草案
CSS Fonts Module Level 3
font-stretch の定義
勧告候補

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
font-stretchChrome 完全対応 62Edge 完全対応 17Firefox 完全対応 62IE 未対応 なしOpera 完全対応 49Safari 完全対応 10.1WebView Android 完全対応 62Chrome Android 完全対応 62Firefox Android 完全対応 62Opera Android 完全対応 41Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 6.0

凡例

完全対応  
完全対応
未対応  
未対応

関連情報