font-width アットルール記述子 (CSS)

構文

/* 単一の値 */
font-width: ultra-condensed;
font-width: extra-condensed;
font-width: condensed;
font-width: semi-condensed;
font-width: normal;
font-width: semi-expanded;
font-width: expanded;
font-width: extra-expanded;
font-width: ultra-expanded;
font-width: 50%;
font-width: 100%;
font-width: 200%;

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

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

値

normal

普通の文字幅。

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

通常より狭幅のフォントフェイスを指定します。ultra-condensed が最も狭くなります。

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

通常より広幅のフォントフェイスを指定します。ultra-expanded が最も広くなります。

<percentage>

<percentage> 値で、50% 以上 200% 以下です。この記述子に負の値は許可されていません。

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

フォントに指定された値と完全に一致する書体が存在しない場合、100% 未満の値は縮小された書体に、100% 以上の値は伸長された書体に割り当てられます。

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

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

可変フォント

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

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

アクセシビリティ

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

• MDN WCAG を理解する、ガイドライン 1.4 の説明
• Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0^(英語)

公式定義

形式文法

font-width = 
  auto                 |
  <'font-width'>{1,2}  

<font-width> = 
  normal              |
  <percentage [0,∞]>  |
  ultra-condensed     |
  extra-condensed     |
  condensed           |
  semi-condensed      |
  semi-expanded       |
  expanded            |
  extra-expanded      |
  ultra-expanded      

例

font-width のパーセント値の範囲を指定

次の例では、League Mono フォントを使用しています。この例では、font-width 記述子に様々なキーワードやパーセント値を指定することで、同じフォントファイルから異なるフォントファミリーを生成しています。

<p>League Mono</p>
<p>League Mono</p>
<p>League Mono</p>

@font-face {
  font-family: "League Mono Ultra Condensed";
  src: url("/shared-assets/fonts/LeagueMono-VF.ttf") format("truetype");
  font-width: ultra-condensed; /* 50% と同じ */
}

@font-face {
  font-family: "League Mono Normal";
  src: url("/shared-assets/fonts/LeagueMono-VF.ttf") format("truetype");
  font-width: 100%; /* normal と同じ */
}

@font-face {
  font-family: "League Mono Ultra Expanded";
  src: url("/shared-assets/fonts/LeagueMono-VF.ttf") format("truetype");
  font-width: ultra-expanded; /* 200% と同じ */
}

p:nth-child(1) {
  font-family: "League Mono Ultra Condensed", sans-serif;
}

p:nth-child(2) {
  font-family: "League Mono Normal", sans-serif;
}

p:nth-child(3) {
  font-family: "League Mono Ultra Expanded", sans-serif;
}

font-stretch による代替の提供

font-width はまだブラウザーの対応が十分ではないため、代替として古い font-stretch 記述子を記載することをお勧めします。対応しているブラウザーが現行の記述子を使用するように、font-stretch を font-width の前に配置してください。

@font-face {
  font-family: "MyFont";
  src: url("my-font.woff2") format("woff2");
  font-stretch: condensed; /* font-width に対応していないブラウザー向け */
  font-width: condensed;
}

仕様書

ブラウザーの互換性

関連情報

• 古い別名の font-stretch 記述子、よりブラウザーの対応の広いもの
• font-display 記述子
• font-family 記述子
• font-weight 記述子
• font-style 記述子
• font-feature-settings プロパティ
• font-variation-settings 記述子
• src 記述子
• unicode-range 記述子