CSS3: font-variant プロパティ - フォント変換の規則の一括指定

■ 概要

項　　目説　　明
記述形式 セレクタ {font-variant: 値 }
値 の形式 normal | none | [ font-variant-ligatures ] [ font-variant-alternates ] [ font-variant-caps ]
　 [ font-variant-numeric ] [ font-variant-east-asian ]
初 期 値 normal
対応ブラウザー C?+ / e?+ / Fx?+ / Op?+ / Ch?+ / Sa?+
適用可能な要素 すべての要素
継　　承 する

■ 解説

font-variantプロパティ は，フォントの フォント変換の規則の一括指定 をします。

フォント変換規則を指定するプロパティには，font-variant-alternates， font-variant-caps， font-variant-east-asian， font-variant-ligatures，font-variant-numeric， font-variant-east-asian など５つのプロパティがありますが，これらを一括指定したり，これらの指定を一括リセットしたりする目的で使用できます。

指定できる値の形式は，以下の通りです。


値説　　明
normal font-variantに関連する５つのプロパティを すべて初期値にリセット します。
none font-variant-ligatures の値を none に，font-variant に関連する残りの４つのプロパティを初期値にリセットします。
font-variant-ligatures font-variant-ligatures プロパティの値のうち，normal と none を除く値を指定します。
font-variant-alternates font-variant-alternates プロパティの値のうち，normal を除く値を指定します。
font-variant-caps font-variant-caps プロパティの値のうち，normal を除く値を指定します。
font-variant-numeric font-variant-numeric プロパティの値のうち，normal を除く値を指定します。
font-variant-east-asian font-variant-east-asian プロパティの値のうち，normal を除く値を指定します。

■ 使用例（ font-variant プロパティの利用）

HTMLソース
CSS
<head> ～ </head>		 
<style type="text/css">
<!--
    span.samp1 {font-size: 20px; font-variant: normal;
                font-weight: normal; font-family: "Times New Roman" ;}
    span.samp2 {font-size: 20px; font-variant: normal; 
                font-weight: bold; font-family: "Times New Roman" ;}
    span.samp3 {font-size: 20px; font-variant: small-caps;
                font-weight: normal; font-family: "Times New Roman" ;}
    span.samp4 {font-size: 20px; font-variant: small-caps; 
                font-weight: bold; font-family: "Times New Roman" ;}
-->
</style>
HTML
<body> ～ </body>		 
<span class="samp1">{font-weight: normal; font-variant: normal; 
                     font-family: "Times New Roman" ;} のフォント</span><br>
<span class="samp2">{font-weight: bold; font-variant: normal;
                     font-family: "Times New Roman" ;} のフォント</span><br>
<span class="samp3">{font-weight: normal; font-variant: small-caps;
                     font-family: "Times New Roman" ;} のフォント</span><br>
<span class="samp4">{font-weight: bold; font-variant: small-caps;
                     font-family: "Times New Roman" ;} のフォント</span><br>

ブラウザー 表示例
{font-weight: normal; font-variant: normal; font-family: "Times New Roman" ;} のフォント
{font-weight: bold; font-variant: normal; font-family: "Times New Roman" ;} のフォント
{font-weight: normal; font-variant: small-caps; font-family: "Times New Roman" ;} のフォント
{font-weight: bold; font-variant: small-caps; font-family: "Times New Roman" ;} のフォント

■ 備考

【参考ページ】