フォント
font-variant-caps
font-variant-caps は、英字の小文字を「スモールキャピタル」（大文字の形を小文字の高さに縮めた字形）にするなど、大文字の見せ方を切り替えます。
構文
normal | small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-capsプレビュー
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
font-family: Inter, sans-serif;
font-variant-caps: small-caps;
}コントロール
font-variant-capssmall-caps
解説
値の書き方
normal：ふつうの字形です。初期値です。small-caps：小文字をスモールキャピタルにします。大文字はそのままです。all-small-caps：大文字も小文字もスモールキャピタルにします。petite-caps・all-petite-caps：スモールキャピタルよりさらに小さい「プチキャピタル」にします。all の付くほうは大文字も変えます。unicase：大文字をスモールキャピタルにし、小文字はそのままにします。大文字と小文字の高さが近い字形が混ざります。titling-caps：大文字だけで書く見出し向けに、細めにデザインされた大文字にします。
フォントに字形が無いとき
どの値もフォントに入っている OpenType の機能（smcp・pcap など）を使います。字形が無いフォントでは、small-caps と all-small-caps は大文字を縮めて作った字形で代わりに表示します。プチキャピタルが無ければスモールキャピタルに、unicase が無ければ大文字だけを縮めた字形になり、titling-caps が無ければ何も変わりません。
このページのプレビューは、どの環境でも同じように見えるように、補助の宣言でサイトが読み込んでいる Inter にしています。この Inter にはプチキャピタルと見出し用の大文字が無いので、petite-caps はスモールキャピタルと同じに、titling-caps は normal と同じになります。