3/16
, or
1st
of
0
.container1 .diagonal-fracs { font-variant-numeric: diagonal-fractions; } .container1 .ordinal { font-variant-numeric: ordinal; } .container1 .zero { font-variant-numeric: slashed-zero; } .inactive .container1 * { font-variant-numeric: normal; }
<div class="container container1"> <p><span class="diagonal-fracs">3/16</span>, or <span class="ordinal">1st</span> of <span class="zero">0</span></p> </div>
Numeric active
3/16
or
1st
of
0
.container2 .diagonal-fracs { font-feature-settings: 'frac' 1; } .container2 .ordinal { font-feature-settings: 'ordn' 1; } .container2 .zero { font-feature-settings: 'zero' 1; } .inactive .container2 * { font-feature-settings: 'frac' 0, 'ordn' 0, 'zero' 0; }
<div class="container container2"> <p><span class="diagonal-fracs">3/16</span>, or <span class="ordinal">1st</span> of <span class="zero">0</span></p> </div>
Numeric active