The font-variant shorthand combines all font-variant-* properties — ligatures, caps, numeric, alternates, east-asian, position, emoji. Accepts keywords from different categories together. normal resets all; none disables ligatures.h1 {
font-variant: small-caps;
}.fancy {
font-variant: common-ligatures discretionary-ligatures small-caps tabular-nums;
}normalResets all font-variant-* longhands to their initial values (default).noneDisables ligatures (font-variant-ligatures: none) and resets other longhands.small-capsDisplays lowercase letters as small capital letters (font-variant-caps).all-small-capsConverts both uppercase and lowercase letters to small-caps.petite-capsDisplays lowercase letters as petite caps — smaller than small-caps.all-petite-capsConverts both uppercase and lowercase letters to petite caps.unicaseDisplays a mix of small-caps for uppercase and normal lowercase letters.titling-capsUses glyphs designed for titles — prevents heaviness at large sizes.ordinalDisplays ordinal suffixes (1st, 2nd) as raised superscript forms (font-variant-numeric).slashed-zeroDisplays the digit 0 with a slash — to distinguish it from the letter O.rubyUses glyphs optimized for small ruby text above characters (font-variant-east-asian).subDisplays characters at subscript size and position (font-variant-position).superDisplays characters at superscript size and position (font-variant-position).textRenders emoji in monochromatic text style (font-variant-emoji).emojiRenders emoji in colorful emoji style (font-variant-emoji).unicodeUses the Unicode default presentation for emoji (font-variant-emoji).historical-formsUses historical glyph forms no longer in common use (font-variant-alternates).common-ligaturesEnables common ligatures like fi, fl (font-variant-ligatures, default).no-common-ligaturesDisables common ligatures.discretionary-ligaturesEnables additional decorative ligatures at the font's discretion.no-discretionary-ligaturesDisables discretionary ligatures.historical-ligaturesEnables historical ligatures not used in modern text.no-historical-ligaturesDisables historical ligatures.contextualEnables contextual alternates — glyphs that adapt to surrounding characters.no-contextualDisables contextual alternates.lining-numsDisplays numbers at uniform height aligned with uppercase letters (font-variant-numeric).oldstyle-numsDisplays numbers in old-style with ascenders and descenders (font-variant-numeric).proportional-numsDisplays numbers with proportional widths (font-variant-numeric).tabular-numsDisplays numbers at fixed widths — useful for tables (font-variant-numeric).diagonal-fractionsDisplays diagonal fractions like ½ (font-variant-numeric).stacked-fractionsDisplays stacked fractions like ¹⁄₂ (font-variant-numeric).jis78Uses Japanese glyphs per JIS X 0208-1978 standard (font-variant-east-asian).jis83Uses Japanese glyphs per JIS X 0208-1983 standard (font-variant-east-asian).jis90Uses Japanese glyphs per JIS X 0208-1990 standard (font-variant-east-asian).jis04Uses Japanese glyphs per JIS X 0213-2004 standard (font-variant-east-asian).simplifiedUses simplified Chinese glyph forms (font-variant-east-asian).traditionalUses traditional Chinese glyph forms (font-variant-east-asian).full-widthDisplays East Asian characters at full width (font-variant-east-asian).proportional-widthDisplays East Asian characters at proportional width (font-variant-east-asian).stylistic()Takes a name — stylistic alternate from @font-feature-values.styleset()Takes a list — full stylistic set.character-variant()Takes a list — character variants.swash()Takes a name — decorative swash.ornaments()Takes a name — graphic ornaments.annotation()Takes a name — annotation forms.CSS Fonts Module Level 4Editor's DraftW3CMDNCSS css aBcDeFShow all codeEdit CSS onlineThe plugin that remembers hundreds of CSS items for youEvery CSS property — in a live demonstrationThe bilingual CSS referencedefinitionexamplessyntaxmodulespecificationsourcesvisual demonstrationpreviousnext
