最終更新日 2021年6月16日

font-variantプロパティ

font-variantプロパティはCSS3において、フォントの表示機能に関するサブプロパティの値をまとめて設定できるプロパティへと、機能が大幅に拡張されています。それに伴って以下のような個々のサブプロパティも新しく追加、定義されています。

・font-variant-ligatures：リガチャを指定する
・font-variant-alternates：フォントの代替文字に置き換える
・font-variant-caps：スモールキャピタルなどの大文字体で表示する
・font-variant-numeric：数値の表示形式について指定する
・font-variant-east-asian：漢字の表示について指定する

各ブラウザは今のところ、新しいバージョンのfont-variantにも、個々のサブプロパティにも対応していません。ただし、OpenTypeフォントに対して、font-feature-settingsを指定することで、同じような表示を再現できる場合があります。

font-variantのサブプロパティではありませんが、CSS3では以下の新しいプロパティも規定されています。

・font-variant-position：上付き文字や下付き文字を指定する
・font-kerning：カーニングを指定する

CSS3での変更点

・font-variantは、CSS3から大幅に機能が拡張され、「フォントの表示機能」に関する各プロパティの値を、まとめて指定するショートハンドプロパティとして定義し直されました。

初期値	適用先	継承
normal	すべての要素	あり

CSS3の値	説明
normal	標準のフォントで表示します。（初期値）
inherit	親要素のfont-variantの値を継承します。
フォントの表示機能に関する各プロパティの値を並べます。

CSS2.1の値	説明
normal	標準のフォントで表示します。（初期値）
small-caps	スモールキャピタルのフォントで表示します。フォントがスモールキャピタルに対応していない場合は、大文字を縮小したものが表示されます。スモールキャピタルとは、「小文字の高さに揃えた大文字」のことです。

サンプルコード

/* CSS3の値 */
font-variant: normal;
font-variant: inherit;
font-variant: フォントの表示機能に関する各プロパティの値を並べます;

/* CSS2.1の値 */
font-variant: normal;
font-variant: small-caps;

参考文献：CSS Fonts Module Level 3

当サイトの活動をサポートしてみませんか？気軽にクリエイターの支援ができます。