font-variant 属性是font-variant-caps,font-variant-numeric,font-variant-alternates,font-variant-ligatures,font-variant-east-asian等属性的简写。你也可以使用简写font 设定font-variant在 CSS Level 2 (Revision 1) 中的值（即normal 或small-caps）。

尝试一下

font-variant: normal;

font-variant: no-common-ligatures proportional-nums;

font-variant: common-ligatures tabular-nums;

font-variant: small-caps slashed-zero;

<section>  <div>    <p>Difficult waffles</p>    <table>      <tr>        <td><span>0O</span></td>      </tr>      <tr>        <td><span>3.14</span></td>      </tr>      <tr>        <td><span>2.71</span></td>      </tr>    </table>  </div></section>

@font-face {  font-family: "Fira Sans";  src:    local("FiraSans-Regular"),    url("/shared-assets/fonts/FiraSans-Regular.woff2") format("woff2");  font-weight: normal;  font-style: normal;}section {  font-family: "Fira Sans", sans-serif;  margin-top: 10px;  font-size: 1.5em;}#example-element table {  margin-left: auto;  margin-right: auto;}.tabular {  border: 1px solid;}

语法

font-variant: small-caps;font-variant: common-ligatures small-caps;/* Global values */font-variant: inherit;font-variant: initial;font-variant: unset;

值

normal

规定一个常规（normal）字型；每个非简写的属性的初始值都是 normal。属于font-variant 的非简写属性有：font-variant-caps,font-variant-numeric,font-variant-alternates,font-variant-ligatures 和font-variant-east-asian。

none

将font-variant-ligatures设定为none ，将其他非简写属性的值设定为初始值normal。

<common-lig-values>,<discretionary-lig-values>,<historical-lig-values>,<contextual-alt-values>

规定与font-variant-ligatures属性相关的关键字，可能的值包括：common-ligatures,no-common-ligatures,discretionary-ligatures,no-discretionary-ligatures,historical-ligatures,no-historical-ligatures,contextual 和no-contextual。

stylistic(),historical-forms,styleset(),character-variant(),swash(),ornaments(),annotation()

规定与font-variant-alternates属性相关的关键字和函数。

small-caps,all-small-caps,petite-caps,all-petite-caps,unicase,titling-caps

规定与font-variant-caps 属性相关的关键字和函数。

<numeric-figure-values>,<numeric-spacing-values>,<numeric-fraction-values>,ordinal,slashed-zero

规定与font-variant-alternates属性相关的关键字，可能的值包括：lining-nums,oldstyle-nums,proportional-nums,tabular-nums,diagonal-fractions,stacked-fractions,ordinal 和slashed-zero。

<east-asian-variant-values>,<east-asian-width-values>,ruby

规定与font-variant-east-asian属性相关的关键字，可能的值包括：jis78,jis83,jis90,jis04,simplified,traditional,full-width,proportional-width,ruby。

font-variant =
normal|
none|
[[<common-lig-values>||<discretionary-lig-values>||<historical-lig-values>||<contextual-alt-values>]||[small-caps|all-small-caps|petite-caps|all-petite-caps|unicase|titling-caps]||[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>)]||[<numeric-figure-values>||<numeric-spacing-values>||<numeric-fraction-values>||ordinal||slashed-zero]||[<east-asian-variant-values>||<east-asian-width-values>||ruby]||[sub|super]||[text|emoji|unicode]]

<common-lig-values> =
common-ligatures|
no-common-ligatures

<discretionary-lig-values> =
discretionary-ligatures|
no-discretionary-ligatures

<historical-lig-values> =
historical-ligatures|
no-historical-ligatures

<contextual-alt-values> =
contextual|
no-contextual

<feature-value-name> =
<ident>

<numeric-figure-values> =
lining-nums|
oldstyle-nums

<numeric-spacing-values> =
proportional-nums|
tabular-nums

<numeric-fraction-values> =
diagonal-fractions|
stacked-fractions

<east-asian-variant-values> =
jis78|
jis83|
jis90|
jis04|
simplified|
traditional

<east-asian-width-values> =
full-width|
proportional-width

示例

Setting the small-caps font variant

HTML

<p>Firefox rocks!</p><p>Firefox rocks!</p>

CSS

p.normal {  font-variant: normal;}p.small {  font-variant: small-caps;}

结果

规范

浏览器兼容性

参见

• text-transform
• text-combine-upright
• text-orientation