font-variant CSS3

font-variant プロパティは全てのfont-variant サブプロパティの省略形です。サブプロパティには、 font-variant-ligatures（文字結合）、 font-variant-alternates（代替文字の選定）、 font-variant-caps（小文字を大文字で表示など）、 font-variant-numeric（数字の表示形式）、 font-variant-east-asian（テキストの表示形式）があります。

名前:font-variant
値: 
normal | none |
 [ <common-lig-values>
|| <discretionary-lig-values>
|| <historical-lig-values>
|| <contextual-alt-values>
|| historical-forms
|| stylistic(<feature-value-name>)
|| 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 ]
初期値:normal
適用対象:全ての要素
継承:する
パーセンテージ:個々のプロパティ参照
メディア:visual（視覚的）
計算値:個々のプロパティ参照
アニメーション:個々のプロパティ参照

font-variant CSS2

font-variant は、フォントをスモールキャップにする時に使います。大文字だけど、大きさが小さい文字をスモールキャップと言います。 小文字にスモールキャップを指定すると小さい大文字で表示されます。

Value（値）

normal
初期値 標準
small-caps
スモールキャップ文字を指定

HTML source

<!DOCTYPE html>
<html>
 <head>
  <title></title>
  <style>
   p.test1 { font-variant: normal; }
   p.test2 { font-variant: small-caps; }
  </style>
 </head>
 <body>
   <p class="test1">SMALL CAPS small caps</p>
   <p class="test2">SMALL CAPS small caps</p>
 </body>
</html>

display

SMALL CAPS small caps

SMALL CAPS small caps

上に戻る