CSS

字体变体 | font-variant

font-variant

font-variant CSS属性是普通写法属性的简写font-variant-capsfont-variant-numericfont-variant-alternatesfont-variant-ligatures,和font-variant-east-asian。您也可以使用简写来设置font-variant(即normalsmall-caps)的CSS Level 2(Revision 1)值font

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

初始值normal
应用于all elements. It also applies to ::first-letter and ::first-line.
是否继承yes
支持的媒体visual
计算值as specified
Animation typediscrete
规范顺序the unique non-ambiguous order defined by the formal grammar

语法

normal指定一个正常的字体; 每个longhand属性都有一个正常的初始值。手写的性质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。

形式语法

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 ]

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

结果

规范

SpecificationStatusComment
CSS Fonts Module Level 3The definition of 'font-variant' in that specification.Candidate RecommendationMade it a shorthand of the new font-variant-* properties.
CSS Level 2 (Revision 1)The definition of 'font-variant' in that specification.RecommendationNo change
CSS Level 1The definition of 'font-variant' in that specification.RecommendationInitial definition

浏览器兼容性

FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0(Yes)1.0 (1.0)4.03.51.0 (85)
ß → SS?No support1.0 (1.7 or earlier)???
i → İ and ı → INo support?14 (14)??No support
Greek accented lettersNo support?15 (15)No supportNo supportNo support
CSS Font L3 version (shorthand)??34 (34) 1??9.1

FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support?(Yes)????
ß → SSNo supportNo support????
i → İ and ı → INo support?14.0 (14)??No support
Greek accented lettersNo support?No supportNo supportNo supportNo support
CSS Font L3 version (shorthand)??34.0 (34) 1??9.3