Okay, the other day I was trying to use
font-variant: small-caps and I could not get it to work. This sent me off on a wild goose chase of sorts because, as it turns out, I was also using
text-transform: uppercase. Needless to say, the two don’t work together as
text-transform: uppercase seems to override
font-variant: small-caps in every browser I tried.
But, I noticed that I could not find any examples of what it looks like and what fonts it works with. So, I decided to do a blog post about it. Below, you will find several examples of this property in use with the basic web fonts.
Arial in small caps
Verdana in small caps
Times New Roman normally
Times New Roman in small caps
Georgia in small caps
One thing that you notice that it only capitalizes the letters that are already capitalized. For some reason, I thought that it capitalized the first letter in every word.
So there you go. It does work with basic web fonts Arial, Verdana, Times New Roman and Georgia. Do you have any more examples of which fonts this will work with?