font-variant-caps

CSSfont-variant-caps プロパティは、大文字向けの代替字形の使用を制御します。

指定されたフォントに複数の異なる大きさで大文字の字形が含まれている場合、このプロパティは最適なものを選択します。 petite capital (小さなの大文字) の字形が利用できない場合は、スモールキャピタル (小ぶりの大文字) の字形を使用して表示します。これらが存在しない場合、ブラウザーは大文字の字形から合成します。

フォントには、様々な大文字小文字の区別がない文字の特殊な字形が含まれていることがあり (発音記号など)、これらが大文字の文字により一致することがあります。しかし、小さな大文字の字形は大文字小文字の区別がない文字のために合成されることはありません。

言語特有の規則

このプロパティは言語特有の一致規則を考慮します。例えば以下のようなものです。

  • チュルク語族 (トルコ語 (tr), アゼルバイジャン語 (az), クリミア・タタール語 (crh), ヴォルガ・タタール語 (tt), バシキール語 (ba) など) では、二種類の i (点ありと点なし) があり、二種類の大文字小文字の組み合わせ i/İı/I があります。
  • ドイツ語 (de) では、 ß は大文字で (U+1E9E) になることがあります。
  • ギリシャ語 (el) では、語全体が大文字の時にアクセント記号がなくなりますが (ά/Α)、分離型のエタは例外です (ή/Ή)。また、また、最初の母音にアクセントを付けた二重母音はアクセント記号を失い、二番目の母音に発音区別符号を付けます (άι/ΑΪ)。

構文

/* キーワード値 */
font-variant-caps: normal;
font-variant-caps: small-caps;
font-variant-caps: all-small-caps;
font-variant-caps: petite-caps;
font-variant-caps: all-petite-caps;
font-variant-caps: unicase;
font-variant-caps: titling-caps;

/* グローバル値 */
font-variant-caps: inherit;
font-variant-caps: initial;
font-variant-caps: unset;

font-variant-caps プロパティは、以下のリスト内にある単一のキーワード値を使用して指定します。どの場合も、フォントが OpenType 値に対応していなければ、字形は合成によって生成されます。

normal
代替字形の使用を無効にします。
small-caps
小さな大文字の表示を有効にします (OpenType 特性: smcp)。スモールキャピタルの字形はふつう、大文字の形をしていますが、小文字の大きさに縮小されています。
all-small-caps
大文字と小文字の両方でスモールキャピタルの表示を有効にします (OpenType 機能: c2sc, smcp)。
petite-caps
petite capital の表示を有効にします (OpenType 特性: pcap)。
all-petite-caps
大文字と小文字の両方で petite capital の表示を有効にします (OpenType 特性: c2pc, pcap)。
unicase
大文字のスモールキャピタルと通常の小文字の混合表示を有効にします (OpenType 特性: unic).
titling-caps
タイトルキャピタルの表示を有効化します (OpenType 特性: titl)。大文字の字形は、ふつう小文字と一緒に使用するためにデザインされています。すべて大文字のタイトル文字列で使用された場合、太くなりすぎることがあります。タイトルキャピタルはこの場合に専用のデザインが行われたものです。

形式文法

normal | small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps

HTML

<p class="small-caps">Firefox rocks, small caps!</p>
<p class="normal">Firefox rocks, normal caps!</p>

CSS

.small-caps {
  font-variant-caps: small-caps;
  font-style: italic;
}
.normal {
  font-variant-caps: normal;
  font-style: italic;
}

結果

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

長い区間のテキストに対して font-variant の値を all-small-capsall-petite-caps を設定すると、失読症のような認知障害を抱えた人にとって読むのが難しくなることがあります。

仕様書

初期値normal
適用対象すべての要素。 ::first-letter and ::first-line にも適用されます。
継承あり
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序
仕様書 状態 備考
CSS Fonts Module Level 3
font-variant-caps の定義
勧告候補 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
font-variant-caps
実験的
Chrome 完全対応 52Edge 未対応 なしFirefox 完全対応 34
完全対応 34
未対応 24 — 34
無効
無効 From version 24 until version 34 (exclusive): this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 39Safari 未対応 なしWebView Android 完全対応 52Chrome Android 完全対応 52Firefox Android 完全対応 34
完全対応 34
未対応 24 — 34
無効
無効 From version 24 until version 34 (exclusive): this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 41Safari iOS 未対応 なしSamsung Internet Android 完全対応 6.0

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。