Small Caps
and
All Small Caps
/* position: normal | small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps */ .container1 .small-caps { font-variant-caps: small-caps; } .container1 .all-small-caps { font-variant-caps: all-small-caps; } .inactive .container1 * { font-variant-caps: normal; }
<div class="container container1"> <p><span class="small-caps">Small Caps</span> and <span class="all-small-caps">All Small Caps</span></p> </div>
Caps active
Small Caps
and
All Small Caps
/* 'smcp', 'c2sc' */ .container2 .small-caps { font-feature-settings: 'smcp' 1; } .container2 .all-small-caps { font-feature-settings: 'c2sc' 1, 'smcp' 1; } .inactive .container2 * { font-feature-settings: 'smcp' 0, 'c2sc' 0; }
<div class="container container2"> <p><span class="small-caps">Small Caps</span> and <span class="all-small-caps">All Small Caps</span></p> </div>
Caps active