CSS font-variant

The CSS font-variant property can be used to select small-caps variation within font family. In a small-caps font the lower case letters look similar to the uppercase ones, but in a smaller size and with slightly different proportions.

CSS property font-variant

CSS version: CSS 2.1
Value: normal | small-caps | inherit
Initial: normal
Applies to: all elements
Inherited: yes

Example – font-variant

In the following code, CSS property font-variant can be changed to the following values
  • normal
  • small-caps
<style type="text/css">
div {
  width: 100px;
  font: 14px/18px sans-serif;
  font-variant: normal;
<div>This is sample text to test font-variant property</div>
font-variant refresh



Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit


Click here to write/view comments