Loading Please Wait...
The CSS font-variant shorthand property allows you to set all the font variants for a font, which is listed below:
We can use any combination of values from font-variant-* properties.
Global values: inherit, initial, revert, revert-layer, unset.
font-variant: small-caps;
font-variant: common-ligatures small-caps;
/* Global values */
font-variant: inherit;
font-variant: initial;
font-variant: revert;
font-variant: revert-layer;
font-variant: unset;
The CSS font-variant-alternates property controls the usage of alternate glyphs.
Keyword values: normal, historical-forms.
Functional values: stylistic(user-defined-ident), styleset(user-defined-ident), character-variant(user-defined-ident), swash(user-defined-ident), ornaments(user-defined-ident), annotation(user-defined-ident), swash(ident1) annotation(ident2).
Global values: inherit, initial, revert, revert-layer, unset.
/* Keyword values */
font-variant-alternates: normal;
font-variant-alternates: historical-forms;
/* Functional notation values */
font-variant-alternates: stylistic(user-defined-ident);
font-variant-alternates: styleset(user-defined-ident);
font-variant-alternates: character-variant(user-defined-ident);
font-variant-alternates: swash(user-defined-ident);
font-variant-alternates: ornaments(user-defined-ident);
font-variant-alternates: annotation(user-defined-ident);
font-variant-alternates: swash(ident1) annotation(ident2);
/* Global values */
font-variant-alternates: inherit;
font-variant-alternates: initial;
font-variant-alternates: revert;
font-variant-alternates: revert-layer;
font-variant-alternates: unset;
The CSS font-variant-caps property controls the use of alternate glyphs for capital letters.
Keyword values: normal, small-caps, all-small-caps, petite-caps, all-petite-caps, unicase, titling-caps.
Global values: inherit, initial, revert, revert-layer, unset.
/* Keyword values */
font-variant-caps: normal;
font-variant-caps: small-caps;
font-variant-caps: all-small-caps;
font-variant-caps: petite-caps;
font-variant-caps: all-petite-caps;
font-variant-caps: unicase;
font-variant-caps: titling-caps;
/* Global values */
font-variant-caps: inherit;
font-variant-caps: initial;
font-variant-caps: revert;
font-variant-caps: revert-layer;
font-variant-caps: unset;
The CSS font-variant-east-asian property controls the use of alternate glyphs for East Asian scripts, like Japanese and Chinese.
Keyword values: normal, ruby, jis78, jis83, jis90, jis04, simplified, traditional, full-width, proportional-width.
Global values: inherit, initial, revert, revert-layer, unset.
/* Keyword values */
font-variant-east-asian: normal;
font-variant-east-asian: ruby;
font-variant-east-asian: jis78;
font-variant-east-asian: jis83;
font-variant-east-asian: jis90;
font-variant-east-asian: jis04;
font-variant-east-asian: simplified;
font-variant-east-asian: traditional;
font-variant-east-asian: full-width;
font-variant-east-asian: proportional-width;
font-variant-east-asian: ruby full-width jis83;
/* Global values */
font-variant-east-asian: inherit;
font-variant-east-asian: initial;
font-variant-east-asian: revert;
font-variant-east-asian: revert-layer;
font-variant-east-asian: unset;
The CSS font-variant-emoji property specifies the default presentation style for displaying emojis.
Keyword values: normal, text, emoji, unicode.
Global values: inherit, initial, revert, revert-layer, unset.
/* Keyword values */
font-variant-emoji: normal;
font-variant-emoji: text;
font-variant-emoji: emoji;
font-variant-emoji: unicode;
/* Global values */
font-variant-emoji: inherit;
font-variant-emoji: initial;
font-variant-emoji: revert;
font-variant-emoji: revert-layer;
font-variant-emoji: unset;
The CSS font-variant-ligatures property controls which ligatures and contextual forms are used in textual content of the elements it applies to. This leads to more harmonized forms in the resulting text.
Keyword values: normal, none, common-ligatures, no-common-ligatures, discretionary-ligatures, no-discretionary-ligatures, historical-ligatures, no-historical-ligatures, contextual, no-contextual.
Global values: inherit, initial, revert, revert-layer, unset.
/* Keyword values */
font-variant-ligatures: normal;
font-variant-ligatures: none;
font-variant-ligatures: common-ligatures;
font-variant-ligatures: no-common-ligatures;
font-variant-ligatures: discretionary-ligatures;
font-variant-ligatures: no-discretionary-ligatures;
font-variant-ligatures: historical-ligatures;
font-variant-ligatures: no-historical-ligatures;
font-variant-ligatures: contextual;
font-variant-ligatures: no-contextual;
/* Global values */
font-variant-ligatures: inherit;
font-variant-ligatures: initial;
font-variant-ligatures: revert;
font-variant-ligatures: revert-layer;
font-variant-ligatures: unset;
The CSS font-variant-numeric property controls the usage of alternate glyphs for numbers, fractions, and ordinal markers.
Keyword values: normal, ordinal, slashed-zero, lining-nums, oldstyle-nums, proportional-nums, tabular-nums, diagonal-fractions, stacked-fractions.
Global values: inherit, initial, revert, revert-layer, unset.
/* Keyword values */
font-variant-numeric: normal;
font-variant-numeric: ordinal;
font-variant-numeric: slashed-zero;
font-variant-numeric: lining-nums;
font-variant-numeric: oldstyle-nums;
font-variant-numeric: proportional-nums;
font-variant-numeric: tabular-nums;
font-variant-numeric: diagonal-fractions;
font-variant-numeric: stacked-fractions;
font-variant-numeric: oldstyle-nums stacked-fractions;
/* Global values */
font-variant-numeric: inherit;
font-variant-numeric: initial;
font-variant-numeric: revert;
font-variant-numeric: revert-layer;
font-variant-numeric: unset;
The CSS font-variant-position property controls the use of alternate, smaller glyphs that are positioned as superscript or subscript.
Keyword values: normal, sub, super.
Global values: inherit, initial, revert, revert-layer, unset.
/* Keyword values */
font-variant-position: normal;
font-variant-position: sub;
font-variant-position: super;
/* Global values */
font-variant-position: inherit;
font-variant-position: initial;
font-variant-position: revert;
font-variant-position: revert-layer;
font-variant-position: unset;
How you feel about this blog:
Share this blog on:
If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com
Contact Us
We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..
Copyright © , Lynxsia IT Solutions, All rights reserved