font-variant-east-asian「漢字の表示指定」

<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-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-east-asian-normal{font-variant-east-asian : normal;}
.css-east-asian-jis78{font-variant-east-asian : jis78;}
.css-east-asian-jis83{font-variant-east-asian : jis83;}
.css-east-asian-jis90{font-variant-east-asian : jis90;}
.css-east-asian-jis04{font-variant-east-asian : jis04;}
.css-east-asian-traditional{font-variant-east-asian : traditional;}
.css-east-asian-full-width{font-variant-east-asian : full-width;}
.css-east-asian-proportional-width{font-variant-east-asian : proportional-width;}

.css-variant-jis78{font-variant: jis78;}
.css-variant-jis83{font-variant: jis83;}
.css-variant-jis90{font-variant: jis90;}
.css-variant-jis04{font-variant: jis04;}
.css-variant-traditional{font-variant: traditional;}
.css-variant-full-width{font-variant: full-width;}
.css-variant-proportional-width{font-variant: proportional-width;}

<!-- html -->
<div class="common">
  <div class="cssTitle">JIS78 字形<br>
  font-variant-east-asian: jis78</div>
  <div>
  <span class="css-east-asian-normal">
  餌 麹 襖 辻</span><br>
  <span class="css-jp78">
  餌 麹 襖 辻</span><br>
  <span class="css-east-asian-jis78">
  餌 麹 襖 辻</span><br>
  <span class="css-variant-jis78">
  餌 麹 襖 辻</span>
  </div>

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

  <div class="cssTitle">旧字体<br>
  font-variant-east-asian: traditional</div>
  <div>
  <span class="css-east-asian-normal">
  学 気 台 楽</span><br>
  <span class="css-trad">
  学 気 台 楽</span><br>
  <span class="css-east-asian-traditional">
  学 気 台 楽</span><br>
  <span class="css-variant-traditional">
  学 気 台 楽</span>
  </div>
  <div class="cssTitle">等幅全角字形<br>
  font-variant-east-asian: full-width</div>
  <div>
  <span class="css-east-asian-normal">
  ﾊﾝｶｸﾓｼﾞ 12345 を全角で、表示する</span><br>
  <span class="css-fwid">
  ﾊﾝｶｸﾓｼﾞ 12345 を全角で、表示する</span><br>
  <span class="css-east-asian-full-width">
  ﾊﾝｶｸﾓｼﾞ 12345 を全角で、表示する</span><br>
  <span class="css-variant-full-width">
  ﾊﾝｶｸﾓｼﾞ 12345 を全角で、表示する</span>
  </div>
  <div class="cssTitle">プロポーショナル字体<br>
  font-variant-east-asian: proportional-width</div>
  <div>
  <span class="css-east-asian-normal">
  プロポーショナル字体で、表示する</span><br>
  <span class="css-pwid">
  プロポーショナル字体で、表示する</span><br>
  <span class="css-east-asian-proportional-width">
  プロポーショナル字体で、表示する</span><br>
  <span class="css-variant-proportional-width">
  プロポーショナル字体で、表示する</span>
  </div>
</div>