The font-variant property allows you to change the targeted text to small caps. This property has been extended in CSS3.
p:first-line {
font-variant: small-caps;
}
Before CSS3, this property accepted one of two possible values: normal (how text is rendered by default) and small-caps.
A value of small-caps will render the text in uppercase letters that are smaller than regular uppercase letters. This does not override uppercasing set in the content, inside the markup. For example:
<p>This is small-caps.</p> <p>THIS IS REGULAR CAPS.</p>
p {
font-size: 20px;
padding: 0 20px;
font-variant: small-caps;
}
In the above demo, both paragraphs are set to font-variant: small-caps. The first paragraph has only the first letter uppercase in the markup, so it appears as expected (first letter uppercase, remainder in small caps).
The second line is written in all uppercase in the markup, which overrides the small-caps value, setting everything in regular uppercase.
Taking this further, if these paragraphs are set to font-variant: small-caps and text-transform: lowercase, then they will appear in all small caps. Similarly, if these paragraphs are set to font-variant: small-caps and text-transform: uppercase, then they will appear in all regular uppercase.
font-variant can be included as part of a font shorthand declaration.
New Additions in CSS3
In CSS3, font-variant becomes a shorthand and can accept multiple values, including all-small-caps, petite-caps, all-petite-caps, titling-caps, and unicase, among others.
Related Properties
Browser Support
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Works | Works | Works | Works | Works | Works | Works |
The new values added in CSS3 have no browser support, so the table above represents support for a value of small-caps.
In IE6/7, setting font-variant: small-caps will cause any text set to text-transform: uppercase or text-transform: lowercase to appear like text-transform: none.
Share
Tweet
Email
Leave a Reply