font-variant-capsプロパティの説明
CSSの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プロパティの構文は以下の通りです。
/* キーワード値 */
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プロパティの書き方を見ていきましょう。以下の例は、英文のテキストに個別のキャピタライゼーションルールを適用した時の比較です。
<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>
.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;
}