HTML and CSS Reference
In-Depth Information
FIGURE 3.22
Browser-calculated small caps are on the left; proper small caps are on the right
and are much better! (Font is Magneta Book Italic from Fontdeck.)
FIGURE 3.23
Petite caps (font is Ernestine from
http://ie.microsoft.com/testdrive/Graphics/
SMALL CAPS AND PETITE CAPS
Yo u c a n u s e
font-variant:small-caps
and
text-transform:uppercase
to control
capitalization of your text, but small caps tend to be just shrunken capitals. Some
fonts include dedicated small caps glyphs, which look better than just using
text-
transform
. To use these in your page, you'd do this (see the result in
Figure 3.22
):
-webkit-font-feature-settings: “smcp” 1;
-moz-font-feature-settings: “smcp=1”;
-ms-font-feature-settings: “smcp” 1;
Yo u c a n a l is o u is e a n o t h e r v a r i a n t c a l l e d “ p e t i t e c a p is , ” w h i c h i is b a is i c a l l y j u is t
more stylized capitals (
Figure 3.23
):
-webkit-font-feature-settings: “pcap” 1;
-moz-font-feature-settings: “pcap=1”;
-ms-font-feature-settings: “pcap” 1;
