CSS font-variant-position Property
The font-variant-position of CSS is used to alter the position of the font as a superscript, subscript, or normal font. These are positioned relative to the baseline of the font, which remains unchanged.
Syntax:
font-variant-position: normal | sub | super
Property values:
- Normal: Normal deactivates superscript and subscript glyphs. If not present any super or sub than the font style will be to the baseline.
- Super: Super activates superscript and alternate glyphs.
- Sub: Sub activates subscript and alternate glyphs.
Syntax:
font-variant-position: normal
Example: In this example, we are using font-variant-position: normal property.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content=" width = device -width, initial-scale = 1 .0"> < title >CSS font-variant-position Property</ title > </ head > < style > em { font-style: unset; } .font { font-variant-position: normal; } </ style > < body > < em > (w3wiki) < em class = "font" > 2 </ em > </ em > </ body > </ html > |
Output:
Example: In this example, we are using font-variant-position: super property.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content=" width = device -width, initial-scale = 1 .0"> < title >CSS font-variant-position Property</ title > </ head > < style > .font { font-variant-position: super; } </ style > < body > < em > (w3wiki) < em class = "font" > 2 </ em > </ em > </ body > </ html > |
Output:
Example: In this example, we are using font-variant-position: sub property.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content=" width = device -width, initial-scale = 1 .0"> < title >CSS font-variant-position Property</ title > </ head > < style > .font { font-variant-position: sub; } </ style > < body > < em > H < em class = "font" > 2 </ em > O < em class = "font" > 2 </ em > </ em > </ body > </ html > |
Output:
Supported Browsers:
- Mozilla Firefox 34
- Safari 9.1