font-variantでフォントをスモールキャップにする【CSS】

font-variantはフォントをスモールキャップで表示できるプロパティです。

スモールキャップとは小文字が小文字の大きさで大文字となって表示されること。

たとえば、このような感じです。左のSMALL-CAPSは小文字にしてたんですけど、font-variantを指定することで、大きさは小文字のままで大文字となって表示されています。

font-variantで指定できる値は「normal」か「small-caps」の2つ。

normalだと標準のフォントで表示されるので、small-capsを指定することが多いと思います。

さっきの例で見たように、small-capsで指定した要素内にある小文字がスモールキャップのフォントで表示され、もしスモールキャップのフォントがない場合でも、大文字を縮小したものが表示されます。