【CSS】font-variant - 文字の変形

CSSのfont-variantプロパティについて解説します。

検証環境

CSS

macOS

14.1

font-variant

font-variantは“文字の変形”のプロパティです。

font-variat: 値;

値は書体によって様々です。

例えば、游ゴシックには次のような値があります。

値	意味	プレビュー
normal	変形なし	text
small-caps	アルファベットの小文字を大文字かつ小さく変形します。	text

また、OSやブラウザによって利用できる値が異なるケースがあることに注意してください。

アルファベットの小文字を大文字かつ小さく変形するサンプルです。

sample.html

<style>
p {
    ___ih_hl_start
    font-variant: small-caps;
    ___ih_hl_end
}
</style>

<p>CSS : Cascading Style Sheets</p>

プレビュー