ほんっとにはじめての HTML5 と CSS3

CSS 3（Fonts Module Level 3）からの font-variantプロパティは、これまで見てきた複数の font-variant 関係のプロパティの「ショートハンドプロパティ」になりました。
以下のプロパティの値を一括指定できます。
・font-variant-capsプロパティ
・font-variant-ligaturesプロパティ
・font-variant-numericプロパティ
・font-variant-alternatesプロパティ
・font-variant-east-asianプロパティ

font-variant-positionプロパティの値はショートハンドに含まれていません。

CSS 2.1 での font-variantプロパティは、ショートハンドではなく、値は normal, small-caps の2つだけでした。（スモールキャップにするかどうかのプロパティだった）
この値は font-variant-capsプロパティで受け継いでいるので、ショートハンドの font-variantプロパティで指定しても大丈夫。CSS 2.1 での使い方をしても問題がないようになってます。

CSS 3（Fonts Module Level 3）では、font-variant 関係のプロパティが OpenType機能を有効化・無効化するためのプロパティになった。これが最大の変更点です。

1. font-variantショートハンドプロパティの値
2. font-variantプロパティを使ってみます

参考：
・CSS Fonts Module Level 3 | W3C Candidate Recommendation
・font-variant - CSS | MDN

font-variantショートハンドプロパティの値

構文の中に「sub」「super」の値がないので、font-variant-positionプロパティの値はショートハンドに含まれていません。

font-variantプロパティの値
キーワード	normal：デフォルト値。 font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures, font-variant-east-asianプロパティの値を normal にします。 font-variant-ligatures の値はデフォルトの none になります。
	none：font-variant-ligaturesプロパティ の値を none にします。 その他のプロパティは初期値の normal になります。
	font-variant関連のプロパティの値は、すべて「キーワード」なので、あとは、指定したいプロパティのキーワードを「半角スペース」で区切って並べるだけ。
構文	normal | none | [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> || stylistic(<feature-value-name>) || historical-forms || styleset(<feature-value-name> #) || character-variant(<feature-value-name> #) || swash(<feature-value-name>) || ornaments(<feature-value-name>) || annotation(<feature-value-name>) || [ small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps ] || <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero || <east-asian-variant-values> || <east-asian-width-values> || ruby ]
グローバル値	font-variant: inherit; 親の値を継承（コレ書かなくても継承するけど） font-variant: initial; 継承した親の値を解消しデフォルト値に戻す font-variant: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作

どのショートハンドでも同じですが、ショートハンドで指定した値以外の値はすべてデフォルト値になります。

font-variant-alternatesプロパティの値の（）内には @font-feature-values で特定した OpenTypeフォントの機能値の名前を入れますので、ショートハンドのときも、当然 @font-feature-values の指定が必要です。

font-variantプロパティを使ってみます

フォントは Mac はヒラギノ、Win は游ゴシック で指定しています。

Chrome（Mac）では下のように表示されました。

サンプルのHTMLです（font-variant はインラインで指定しています）

<div class="mihon">
  <p>
    <span>(未指定)</span>
    <b>Chapter One</b><br>
    親譲りの無鉄砲で（...略...）</p>
 <p style="font-variant: small-caps traditional proportional-width">
    <span>(font-variant: small-caps traditional proportional-width)</span>
    <b>Chapter One</b><br>
    親譲りの無鉄砲で（...略...）</p>
</div>

サンプルのCSSです。

.mihon {
	color:black;
	margin:1em 0;
	border:solid 1px #ccc;
	padding:0 1.5em
	}
.mihon p {
	font-family:'Hiragino Sans','Hiragino Kaku Gothic ProN','Hiragino Kaku Gothic Pro','Yu Gothic', '游ゴシック',sans-serif;
	font-weight: 400;
	font-size:1rem;
	margin:15px 0;
	text-align: justify;
	}
.mihon p span {
	font-size:15px;
	color:#579961;
	display:block;
	margin:.2em 0;
	font-variant: normal}
.mihon p b {
	font-size:1.3rem;
	color:#888}

次回予告

次回は font-feature-settingsプロパティを使おう。
これまで見てきた font-variant 関係のプロパティで使う OpenTypeフォントの機能を 機能タグ値（feature-tag-value）で直接指定することができるプロパティです。

関連記事

• 【37】空白を詰めるかどうか決める white-spaceプロパティ
• 【36】単語の途中で改行するとき自動でハイフンを付ける hyphens
• 【35】改行の禁則処理を解除するか決める word-breakプロパティ
• 【34】単語の途中で折り返させる overflow-wrap（word-wrap）
• 【33】テキストの整列や両端揃えを指定する text-alignプロパティ
• 【32】インラインの縦方向の整列を決める vertical-alignプロパティ
• 【31】OpenType機能を直接指定できる font-feature-settings
• 【30-7】ショートハンドプロパティになった font-variant
• 【30-6】漢字や仮名のための font-variant-east-asian
• 【30-5】文字の代替えを指定する font-variant-alternates
• 【30-4】数字の表示方法を指定する font-variant-numeric
• 【30-3】リガチャ（合字）を指定する font-variant-ligatures
• 【30-2】上付き・下付き文字を指定する font-variant-position
• 【30-1】スモールキャップなどを指定する font-variant-caps
• 【29】文字間を自動調整してくれる font-kerningプロパティ