font-variant (CSS property)
| IE5.5+ | FF1+ | Saf3 | Op9.2+ |
|---|---|---|---|
| Full | Full | None | Full |
| Inherited | Initial | Version |
|---|---|---|
| Yes | normal |
CSS1, 2 |
Example
This style rule makes
h1 headings render with small-caps:
h1 {
font-variant: small-caps;
}Description
font-variant
sets the font variant that will be used for the text content of an
element.
Small-caps fonts are fonts in which lowercase letters appear as smaller versions of the corresponding uppercase letters.
Value
normal- The value
normalspecifies a font that is not a small-caps font. small-caps- The value
small-capsspecifies a font that is a small-caps font. CSS2.1 allows a user agent to use scaled-down versions of uppercase letters in lieu of true small-caps lowercase letters, and even to use ordinary uppercase letters as a replacement.
Compatibility
| IE | 5.5 | Full |
|---|---|---|
| 6.0 | Full | |
| 7.0 | Full | |
| Firefox | 1.0 | Full |
| 1.5 | Full | |
| 2.0 | Full | |
| Safari | 1.3 | None |
| 2.0 | None | |
| 3.0 | None | |
| Opera | 9.2 | Full |
| 9.5 | Full |
In Internet Explorer
for Windows versions up to and including 7, setting
font-variant to small-caps causes
the values lowercase and
uppercase for the text-transform
property to behave as if they were set to none. The
computed intrinsic height of an inline box will be incorrect for
small-caps text if the text consists solely of lowercase letters, and
contains no whitespace or punctuation characters.
Internet Explorer for Windows versions up to and
including 7 don’t support the value inherit.
Safari versions up to and including 3 don’t support this property.
User-contributed notes
- ID:
- #1
- Date:
- Sun, 16 Mar 2008 16:42:46 GMT
- Status:
- This note has not yet been confirmed for accuracy and relevance.
Thank you for pointing out the lack of small-caps support SitePoint! I couldn't find it anywhere else.
Other people may have noticed that Safari has issues with small-caps, and seems to take 70% of the font size for all small-cap characters. A 12 pixel font size results in 8 pixel small caps, which is very difficult to read.
Here is a tip on how to get small-caps looking right in Safari:
Formula for calculating em units:
1 / current font size * desired pixel size = em.
body
{
font-size: 62.5%; /* 10 pixels */
}
a.navLink
{
font-size: 1.2em /* 12 pixels */
font-variant: small-caps;
}
span.smallCaps
{
font-size: 1em /* 10 pixels */;
font-variant: normal;
text-transform: uppercase;
}
<a class="navLink" href="#">A<span class="smallCaps">bout</span></a>
Take a look at it in all major browsers and you'll notice that it remains consistent to normal small-caps in IE/Firefox/Opera, and will actually look good in Safari!
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.
