font-variant

**font-variant** CSS 简写属性 允许你为字体设置所有字体变体。

你也可以使用 font 简写设置 CSS Level 2.1 中定义的 <font-variant-css2> 值（即 normal 或 small-caps）。

试试看

构成属性

此属性是以下 CSS 属性的简写

语法

css
font-variant: small-caps;
font-variant: common-ligatures small-caps;

/* Global values */
font-variant: inherit;
font-variant: initial;
font-variant: revert;
font-variant: revert-layer;
font-variant: unset;

值

normal

指定普通字体。每个长属性的初始值为 normal。

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-ligatures 长属性相关的关键字和函数。

small-caps，all-small-caps，petite-caps，all-petite-caps，unicase，titling-caps

指定与 font-variant-caps 长属性相关的关键字和函数。small-caps 值是 font 简写属性中唯一有效的非 normal 字体变体。

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

指定与 font-variant-numeric 长属性相关的关键字。可能的值为 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。

sub，super

指定与 font-variant-position 长属性相关的关键字和函数。

text，emoji，unicode

指定与 font-variant-emoji 长属性相关的关键字和函数。

正式定义

初始值normal
应用于所有元素和文本。它也适用于 ::first-letter 和 ::first-line。
继承是
计算值如指定
动画类型离散

正式语法

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

示例

设置小写字体变体

HTML

html
<p class="normal">Firefox rocks!</p>
<p class="small">Firefox rocks!</p>

CSS

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

结果

规范

规范
CSS Fonts 模块级别 4
# font-variant-prop

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅