font-variant-caps:文字列に適用されるキャピタライゼーションルールを制御する

初期値 normal
適用対象 全ての要素、::first-letterおよび::first-line
継承 する
アニメーション 離散値
対応ブラウザ caniuseで確認

font-variant-capsプロパティの説明

font-variant-capsは、文字列に適用されるキャピタライゼーションルールを制御します。文字列に適用されているfont-familyに異なる大きさの大文字体が含まれている場合に、このプロパティで最適なものを選ぶように指定できます。

英文にはキャピタライゼーションルール(capitalization rules)というものがあり、本プロパティはそれに関する機能を制御するものです。

font-variant-capsに指定できる値

normal
代替字体の使用を無効にします。これが初期値です。
small-caps
小文字をスモールキャップの字体で表示します。一般的にスモールキャピタルの字体は小文字の大きさに縮小された大文字です。OpenTypeのsmcpに相当します。
all-small-caps
大文字と小文字の両方にスモールキャップの表示を有効にします。OpenTypeのc2scおよびsmcpに相当します。
petite-caps
小文字をプチキャップの字体で表示します。プチキャップは一部のフォントに含まれる字体で、x-heightを基準にした高さでスモールキャップと異なります。OpenTypeのpcapに相当します。
all-petite-caps
大文字と小文字の両方にプチキャップの表示を有効にします。OpenTypeのc2pcおよびpcapに相当します。
unicase
大文字のスモールキャップと通常の小文字を混合して表示することを有効にします。OpenTypeのunicに相当します。
titling-caps
タイトルキャップの表示を有効にします。タイトルキャピタルは、大文字で全てを表記する見出しなどに最適化された専用の字体です。

font-variant-capsの使い方とサンプル

font-variant-capsプロパティの構文は以下の通りです。

CSS
/* キーワード値 */
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: revert;
font-variant-caps: unset;

font-variant-capsの実例

それでは実際にfont-variant-capsプロパティの書き方を見ていきましょう。以下の例は、英文のテキストに個別のキャピタライゼーションルールを適用した時の比較です。

表示確認
CSS
.samp_box {
	overflow: auto;
	width: 100%;
	margin-top: 1rem;
	padding: 0 1rem 1rem;
	background: #eee;
}
.samp_box h2 {
	margin: 1rem 0 0;
	font-size: 1rem;
}
.samp_box p {
	margin: 1rem 0 0;
	padding: .3rem;
	background: #fff;
}
.fvc_norm {
	font-variant-caps: normal;
}
.fvc_sc {
	font-variant-caps: small-caps;
}
.fvc_asc {
	font-variant-caps: all-small-caps;
}
.fvc_pc {
	font-variant-caps: petite-caps;
}
.fvc_apc {
	font-variant-caps: all-petite-caps;
}
.fvc_uni {
	font-variant-caps: unicase;
}
.fvc_tc {
	font-variant-caps: titling-caps;
}
HTML
<section class="samp_box">
	<h2>font-variant-caps:大文字小文字混合</h2>
	<p class="fvc_norm">This paragraph is displayed in "normal" value.</p>
	<p class="fvc_sc">This paragraph is displayed in "small-caps" value.</p>
	<p class="fvc_asc">This paragraph is displayed in "all-small-caps" value.</p>
	<p class="fvc_pc">This paragraph is displayed in "petite-caps" value.</p>
	<p class="fvc_apc">This paragraph is displayed in "all-petite-caps" value.</p>
	<p class="fvc_uni">This paragraph is displayed in "unicase" value.</p>
	<p class="fvc_tc">This paragraph is displayed in "titling-caps" value.</p>
</section>

<section class="samp_box">
	<h2>font-variant-caps:全文大文字</h2>
	<p class="fvc_norm">THIS PARAGRAPH IS DISPLAYED IN "NORMAL" VALUE.</p>
	<p class="fvc_sc">THIS PARAGRAPH IS DISPLAYED IN "SMALL-CAPS" VALUE.</p>
	<p class="fvc_asc">THIS PARAGRAPH IS DISPLAYED IN "ALL-SMALL-CAPS" VALUE.</p>
	<p class="fvc_pc">THIS PARAGRAPH IS DISPLAYED IN "PETITE-CAPS" VALUE.</p>
	<p class="fvc_apc">THIS PARAGRAPH IS DISPLAYED IN "ALL-PETITE-CAPS" VALUE.</p>
	<p class="fvc_uni">THIS PARAGRAPH IS DISPLAYED IN "UNICASE" VALUE.</p>
	<p class="fvc_tc">THIS PARAGRAPH IS DISPLAYED IN "TITLING-CAPS" VALUE.</p>
</section>

font-variant-capsに関連するCSSプロパティ

フォント・文字色
color 文字の色を指定する
font フォントに関する様々な機能を一括で指定する
font-family 文字フォントの種類を指定する
font-feature-settings OpenTypeフォントの拡張書体の特性を制御する
font-kerning フォントの文字詰め(カーニング)を制御する
font-language-override 文字を表示する祭に使用する言語情報を一時的に変更する
font-size 文字フォントの大きさを指定する
font-size-adjust 現在のフォントサイズを基準に小文字の大きさを相対的に調整する
font-stretch 表示させるフォントの幅広や幅狭のフェイスを指定する
font-style フォントを筆記体や斜体で表示するかどうかを指定する
font-synthesis 太字や斜体に対応していないフォントの加工を制御する
font-variant フォントの表示形式やブラウザの合成規則を一括で指定する
font-variant-alternates 文字フォントの代替字体(グリフ)の選定を制御する
font-variant-caps 文字列に適用されるキャピタライゼーションルールを制御する
font-variant-east-asian 東アジアの言語で使われる字体を制御する
font-variant-ligatures 隣り合った文字フォントの合字(リガチャ)を制御する
font-variant-numeric 数値に関する文字表記を制御する
font-variant-position 上付き文字や下付き文字として配置されるべき字体の使用を制御する
font-weight 文字フォントの太さを指定する