font-variant-numeric「数値の表示形式指定」

<style type="text/css">
.common div{
  font-family   : "メイリオ", sans-serif;
  width         : 290px;
  border        : 2px solid #6495ed;
  background    : #e7e7ff;
  padding       : 10px;
}
div.cssTitle {
  margin-top    : 10px;
  background    : #6495ed;
  color         : #fff;
  font-weight   : bold;
}
.css-lnum{font-feature-settings: "lnum";}
.css-onum{font-feature-settings: "onum";}
.css-pnum{font-feature-settings: "pnum";}
.css-tnum{font-feature-settings: "tnum";}
.css-frac{font-feature-settings: "frac";}
.css-ordn{font-feature-settings: "ordn";}

.css-numeric-normal{font-variant-numeric : normal;}
.css-numeric-lining{font-variant-numeric :  lining-nums;}
.css-numeric-oldstyle{font-variant-numeric :  oldstyle-nums;}
.css-numeric-proportional{font-variant-numeric :  proportional-nums;}
.css-numeric-tabular{font-variant-numeric :  tabular-nums;}
.css-numeric-diagonal{font-variant-numeric :  diagonal-fractions;}
.css-numeric-ordinal{font-variant-numeric :  ordinal;}

.css-variant-lining{font-variant: lining-nums;}
.css-variant-oldstyle{font-variant: oldstyle-nums;}
.css-variant-proportional{font-variant: proportional-nums;}
.css-variant-tabular{font-variant: tabular-nums;}
.css-variant-diagonal{font-variant: diagonal-fractions;}
.css-variant-ordinal{font-variant: ordinal;}

<!-- html -->
<div class="common">
  <div class="cssTitle">ライニング数字<br>
  font-variant-numeric: lining-nums</div>
  <div>
  <span class="css-numeric-normal">
  0123456789</span><br>
  <span class="css-lnum">
  0123456789</span><br>
  <span class="css-numeric-lining">
  0123456789</span><br>
  <span class="css-variant-lining">
  0123456789</span>
  </div>

※タイトルとclassを該当内容に変更するのみのため、以下省略。

  <div class="cssTitle">分数（スラッシュ表示）<br>
  font-variant-numeric: diagonal-fractions</div>
  <div>
  <span class="css-numeric-normal">
  1/2 3/4 5/6 7/8 9/10</span><br>
  <span class="css-frac">
  1/2 3/4 5/6 7/8 9/10</span><br>
  <span class="css-numeric-diagonal">
  1/2 3/4 5/6 7/8 9/10</span><br>
  <span class="css-variant-diagonal">
  1/2 3/4 5/6 7/8 9/10</span>
  </div>
  <div class="cssTitle">上付き序数表記<br>
  font-variant-numeric: ordinal</div>
  <div>
  <span class="css-numeric-normal">
  1st 2nd 3rd 4th</span><br>
  <span class="css-ordn">
  1st 2nd 3rd 4th</span><br>
  <span class="css-numeric-ordinal">
  1st 2nd 3rd 4th</span><br>
  <span class="css-variant-ordinal">
  1st 2nd 3rd 4th</span>
  </div>
</div>