就业培训     下载中心     Wiki     联络
登录   注册
  1. 首页
  2. CSS
  3. font-variant

在此页

font-variant CSS shorthand property allows you to set all the font variants for a font.

You can also set the CSS Level 2 (Revision 1) values of font-variant , (that is, normal or small-caps ), by using the font shorthand.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

组成特性

此特性是下列 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 .

形式定义

初始值 normal
适用于 所有元素。它还适用于 ::first-letter and ::first-line .
继承 yes
计算值 如指定
动画类型 discrete

形式句法 

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

HTML 

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

CSS 

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

结果

规范

规范 状态 注释
CSS Fonts Module Level 3
The definition of 'font-variant' in that specification. 		候选推荐 Made it a shorthand of the new font-variant-* 特性。
CSS Level 2 (Revision 1)
The definition of 'font-variant' in that specification. 		推荐 No change
CSS Level 1
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 完整支持 1 Edge 完整支持 12 Firefox 完整支持 1 IE 完整支持 4 Opera 完整支持 3.5 Safari 完整支持 1 WebView Android 完整支持 1 Chrome Android 完整支持 18 Firefox Android 完整支持 4 Opera Android 完整支持 11 Safari iOS 完整支持 1 Samsung Internet Android 完整支持 1.0
CSS Fonts Module Level 3 shorthand Chrome 完整支持 52 Edge 完整支持 79 Firefox 完整支持 34
完整支持 34
不支持 33 — 34 Disabled
Disabled ). To change preferences in Firefox, visit
IE 不支持 No Opera 完整支持 39 Safari 完整支持 9.1 WebView Android 完整支持 52 Chrome Android 完整支持 52 Firefox Android 完整支持 34
完整支持 34
不支持 33 — 34 Disabled
Disabled ). To change preferences in Firefox, visit
Opera Android 完整支持 41 Safari iOS 完整支持 9.3 Samsung Internet Android 完整支持 6.0
Greek accented characters Chrome 不支持 No 注意事项
不支持 No 注意事项
注意事项 Some operating systems may correctly omit accents in all-uppercase Greek text.
Edge 不支持 No 注意事项
不支持 No 注意事项
注意事项 Some operating systems may correctly omit accents in all-uppercase Greek text.
Firefox 不支持 No 注意事项
不支持 No 注意事项
注意事项 Some operating systems may correctly omit accents in all-uppercase Greek text.
IE 不支持 No Opera 不支持 No 注意事项
不支持 No 注意事项
注意事项 Some operating systems may correctly omit accents in all-uppercase Greek text.
Safari 不支持 No WebView Android 不支持 No 注意事项
不支持 No 注意事项
注意事项 Some operating systems may correctly omit accents in all-uppercase Greek.
Chrome Android 不支持 No 注意事项
不支持 No 注意事项
注意事项 Some operating systems may correctly omit accents in all-uppercase Greek text.
Firefox Android 不支持 No 注意事项
不支持 No 注意事项
注意事项 Some operating systems may correctly omit accents in all-uppercase Greek text.
Opera Android 不支持 No 注意事项
不支持 No 注意事项
注意事项 Some operating systems may correctly omit accents in all-uppercase Greek text.
Safari iOS 不支持 No Samsung Internet Android 不支持 No 注意事项
不支持 No 注意事项
注意事项 Some operating systems may correctly omit accents in all-uppercase Greek text.
i → İ and ı → I Chrome 完整支持 31 Edge 完整支持 12 Firefox 完整支持 14 IE 完整支持 4 Opera 完整支持 18 Safari 完整支持 8 WebView Android 完整支持 ≤37 Chrome Android 完整支持 31 Firefox Android 完整支持 14 Opera Android 完整支持 18 Safari iOS 完整支持 8 Samsung Internet Android 完整支持 2.0
ß → SS Chrome 不支持 No 注意事项
不支持 No 注意事项
注意事项 Some operating systems may capitalize ß as SS .
Edge 不支持 No 注意事项
不支持 No 注意事项
注意事项 Some operating systems may capitalize ß as SS .
Firefox 不支持 No 注意事项
不支持 No 注意事项
注意事项 Some operating systems may capitalize ß as SS .
IE 不支持 No Opera 不支持 No 注意事项
不支持 No 注意事项
注意事项 Some operating systems may capitalize ß as SS .
Safari 不支持 No WebView Android 不支持 No 注意事项
不支持 No 注意事项
注意事项 Some operating systems may capitalize ß as SS .
Chrome Android 不支持 No 注意事项
不支持 No 注意事项
注意事项 Some operating systems may capitalize ß as SS .
Firefox Android 不支持 No 注意事项
不支持 No 注意事项
注意事项 Some operating systems may capitalize ß as SS .
Opera Android 不支持 No 注意事项
不支持 No 注意事项
注意事项 Some operating systems may capitalize ß as SS .
Safari iOS 不支持 No Samsung Internet Android 不支持 No 注意事项
不支持 No 注意事项
注意事项 Some operating systems may capitalize ß as SS .

图例

完整支持

完整支持

不支持

不支持

见实现注意事项。

见实现注意事项。

用户必须明确启用此特征。

用户必须明确启用此特征。

另请参阅

元数据

  • 最后修改：
  1. CSS
  2. CSS 参考
  3. CSS 字体
  4. 指南
    1. OpenType font features guide
    2. Variable fonts guide
  5. At-Rules
    1. @font-face
    2. @font-feature-values
  6. 特性
    1. font
    2. font-family
    3. font-feature-settings
    4. font-kerning
    5. font-language-override
    6. font-optical-sizing
    7. font-size
    8. font-size-adjust
    9. font-smooth
    10. font-stretch
    11. font-style
    12. font-synthesis
    13. font-variant
    14. font-variant-alternates
    15. font-variant-caps
    16. font-variant-east-asian
    17. font-variant-ligatures
    18. font-variant-numeric
    19. font-variant-position
    20. font-variation-settings
    21. font-weight
    22. line-height
    23. line-height-step

Copyright  © 2014-2026 乐数软件    

工业和信息化部： 粤ICP备14079481号-1