The font-variant property allows your text
to be displayed in a special type of way called "small-caps". Small-caps
is short for Small Capital Letters. It is basically just a miniturized
version of the uppercase alphabet. Imagine if you were highlight some
text, make it uppercase, and then reduce it's size by about 20%. Then
you would have small-caps. It has a unique look which sometimes works
well for headlines, pull-quotes, and legal documents. W3C describes
small-caps as...
"...the glyphs for lowercase letters look similar to the
uppercase ones, but in a smaller size and with slightly different
proportions."
Here is an example of what "small-caps" text looks like:
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Sed scelerisque orci a dolor. Ut a eros nec
turpis rutrum placerat. Aenean dignissim rhoncus ipsum. Nulla facilisi.
Donec auctor semper eros. Nam vitae eros sit amet metus aliquam iaculis.
Fusce ut risus nec felis tincidunt viverra.
The font-variant property allows you
to enable or disable small-caps for a font. It can be one of the
following 3 values:
normal
small-caps
inherit
If you specify the font-variant
property as normal, your font will be displayed in
normal (non small-caps) font. If, however, you specify it's value as
small-caps, your font will be displayed in
"small-caps". If you specify it's property as inherit
it will use the same font-variant property value
as it's parent.
Tip:
This property is optional. If you would like to include it in your
generated CSS code simply check the checkbox by it's name (to enable it)
and choose a value for it from the font-variant dropdown list.
Read
an official description of the font-variant property from the W3C