font-variant

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

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) 中的值(即normalsmall-caps)。

尝试一下

语法

css
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-ligaturesfont-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, contextualno-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, ordinalslashed-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

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;
}

结果

规范

Specification
CSS Fonts Module Level 4
# font-variant-prop
Scalable Vector Graphics (SVG) 2
# FontVariantProperty
初始值normal
适用元素所有元素和文本. It also applies to ::first-letter and ::first-line.
是否是继承属性
计算值as specified
动画类型离散值

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
font-variant
CSS Fonts Module Level 3 shorthand
Greek accented characters
historical-forms
none
normal
sub
super
iİ and ıI
ßSS

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.

参见