CSS font-variant Property

CSS font-variant property specifies whether the text should be displayed in small-caps format or not.

In small-caps format, the text is displayed in uppercase letters. But, the font size of the converted letters is somewhat smaller than the regular uppercase letters.

Example:

.p1{
  font-variant: normal;
}
.p2{
  font-variant: small-caps;
}

CSS Syntax

The font-variant property has the following syntax:

font-variant: normal|small-caps|initial|inherit;

Property Values

The font-variant property accepts the following values:

normalThis is the default value. The text is displayed normally.
small-capsThe text is displayed in uppercase letters with a font size smaller than the regular uppercase letters.
initialsets the font-variant property to its default value(normal).
inheritInherits the font-variant property from the parent element.

General Info

Default Valuenormal
InheritedYes
JavaScript Usageelement.style.fontVariant = “small-caps”;

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.