Ups
1
and downs
2
/* position: normal|sub|super */ .container1 .super { font-variant-position: super; } .container1 .sub { font-variant-position: sub; } .inactive .container1 * { font-variant-position: normal; }
<div class="container container1"> <p>Ups<span class="super">1</span> and downs<span class="sub">2</span></p> </div>
Position active
Ups
1
and downs
2
/* 'subs', 'sups' */ .container2 .super { font-feature-settings: 'sups'; } .container2 .sub { font-feature-settings: 'subs'; } .inactive .container2 * { font-feature-settings: 'sups' 0, 'subs' 0; }
<div class="container container2"> <p>Ups<span class="super">1</span> and downs<span class="sub">2</span></p> </div>
Position active