font-feature-settings「OpenTypeフォントの字形の切替え」

<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-normal{font-feature-settings : normal;}
.css-liga-clig{font-feature-settings : "liga","clig";}
.css-dlig{font-feature-settings : "dlig";}
.css-smcp{font-feature-settings : "smcp";}
.css-c2sc{font-feature-settings : "c2sc";}
.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-jp78{font-feature-settings : "jp78";}
.css-jp83{font-feature-settings : "jp83";}
.css-jp90{font-feature-settings : "jp90";}
.css-jp04{font-feature-settings : "jp04";}
.css-trad{font-feature-settings : "trad";}
.css-fwid{font-feature-settings : "fwid";}
.css-pwid{font-feature-settings : "pwid";}
.css-hist{font-feature-settings : "hist";}

.css-ligatures-common{font-variant-ligatures: common-ligatures;}
.css-ligatures-discretionary{font-variant-ligatures: discretionary-ligatures;}

.css-variant-common{font-variant: common-ligatures;}
.css-variant-discretionary{font-variant: discretionary-ligatures;}

<!-- html -->
<div class="common">
  <div class="cssTitle">一般的な合字<br>
  font-feature-settings:"liga","clig"</div>
  <div>
  <span class="css-normal">
  ff や fi が1つの字形になる</span><br>
  <span class="css-liga-clig">
  ff や fi が1つの字形になる</span><br>
  <span class="css-ligatures-common">
  ff や fi が1つの字形になる</span><br>
  <span class="css-variant-common">
  ff や fi が1つの字形になる</span>
  </div>
  <div class="cssTitle">任意の合字<br>
  font-feature-settings:"dlig"</div>
  <div>
  <span class="css-normal">
  ct や sp が1つの字形になる</span><br>
  <span class="css-liga-dlig">
  ct や sp が1つの字形になる</span><br>
  <span class="css-ligatures-discretionary">
  ct や sp が1つの字形になる</span><br>
  <span class="css-variant-discretionary">
  ct や sp が1つの字形になる</span>
  </div>
</div>