<link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/notosansjp.css">
<p class="text">font-variant-east-asian: normal</p>
<p class="text2">「日本語」の文字詰め！カナ</p>

<p class="text">font-variant-east-asian: proportional-width</p>
<p class='text2 pwid'>「日本語」の文字詰め！カナ</p>

<p class="text">font-variant-east-asian: ruby</p>
<p class='text2 pkna'>「日本語」の文字詰め！カナ</p>

.text2{
  font-family: 'Noto Sans Japanese', sans-serif;
  font-size: 36px;
  text-align: center;
}
.text{
  font-weight: bold;
  text-align: center;
  font-size: 20px;
}
.palt {
  font-variant-east-asian: normal;
  font-feature-settings : "normal";
}
.pwid {
  font-variant-east-asian: proportional-width;
  font-feature-settings : "proportional-width";
}
.pkna { 
 font-variant-east-asian: ruby;
 font-feature-settings : "ruby";
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.