font-variant

在此页

组成特性
句法
形式定义
形式句法
范例
规范
浏览器兼容性
另请参阅
相关话题

font-variant CSS shorthand property allows you to set all the font variants for the fonts specified in the @font-face rule.

组成特性

此特性是下列 CSS 特性的简写：

句法

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

值

normal: Specifies a normal font face; each of the longhand properties has an initial value of normal. Longhand properties of font-variant are: font-variant-caps , font-variant-numeric , font-variant-alternates , font-variant-ligatures ，和 font-variant-east-asian .
none: Sets the value of the font-variant-ligatures to none and the values of the other longhand property as normal , their initial value.
<common-lig-values> , <discretionary-lig-values> , <historical-lig-values> , <contextual-alt-values>: Specifies the keywords related to the font-variant-ligatures longhand property. The possible values are: 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(): Specifies the keywords and functions related to the font-variant-alternates longhand property.
small-caps , all-small-caps , petite-caps , all-petite-caps , unicase , titling-caps: Specifies the keywords and functions related to the font-variant-caps longhand property.
<numeric-figure-values> , <numeric-spacing-values> , <numeric-fraction-values> , ordinal , slashed-zero: Specifies the keywords related to the font-variant-numeric longhand property. The possible values are: lining-nums , oldstyle-nums , proportional-nums , tabular-nums , diagonal-fractions , stacked-fractions , ordinal ，和 slashed-zero .
<east-asian-variant-values> , <east-asian-width-values> , ruby: Specifies the keywords related to the font-variant-east-asian longhand property. The possible values are: jis78 , jis83 , jis90 , jis04 , simplified , traditional , full-width , proportional-width , ruby .

形式定义

相关 at-rule	`@font-face`
初始值	`normal`
计算值	如指定

形式句法

normal | none | [ <common-lig-values> || <discretionary-lig-values> || <historical-lig-values> || <contextual-alt-values> || 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>) || [ 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 ]where 
<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> = <custom-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

The following finds a local Open Sans font or imports it, and allows using the font for small-caps.

@font-face {
  font-family: "Open Sans";
  src: local("Open Sans") format("woff2"),
       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
  font-variant: small-caps;
}

规范

规范	状态	注释
CSS Fonts Module Level 4 The definition of 'font-variant' in that specification.	工作草案
CSS Fonts Module Level 3 The definition of 'font-variant' in that specification.	候选推荐

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`font-variant`	Chrome 完整支持 4	Edge 完整支持 12	Firefox 完整支持 3.5	IE 完整支持 4	Opera 完整支持 10	Safari 完整支持 3.1	WebView Android 完整支持 ≤37	Chrome Android 完整支持 18	Firefox Android 完整支持 4	Opera Android 完整支持 10.1	Safari iOS 完整支持 2	Samsung Internet Android 完整支持 1.0

图例

完整支持

另请参阅

元数据

最后修改： Nov 9, 2020

CSS
CSS 参考
CSS 字体
指南
1. OpenType font features guide
2. Variable fonts guide
At-Rules
1. @font-face
2. @font-feature-values
特性

在此页