ryoakg
9/6/2016 - 2:29 AM
noto-font-demo.html
<head>
<title>noto font</title>
<style>
/* https://fonts.google.com/earlyaccess#Noto+Sans+JP */
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
.noto-sans-jp {
font-family: 'Noto Sans JP', sans-serif;
font-size: 100%;
}
/* https://fonts.google.com/earlyaccess#Noto+Sans+Japanese */
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
.noto-sans-japanese {
font-family: 'Noto Sans Japanese', sans-serif;
font-size: 100%;
}
/* https://www.w3.org/TR/css-fonts-3/#font-weight-numeric-values */
.w100 { font-weight:100; }
.w200 { font-weight:200; }
.w300 { font-weight:300; }
.w400 { font-weight:400; }
.w500 { font-weight:500; }
.w600 { font-weight:600; }
.w700 { font-weight:700; }
.w800 { font-weight:800; }
.w900 { font-weight:900; }
.bolder { font-weight:bolder; }
.lighter { font-weight:lighter; }
</style>
</head>
<body>
<ul class="noto-sans-jp">
<li class="w100">あいうえお<span class="bolder">あいうえお</span><span class="lighter">あいうえお</span></li>
<li class="w200">あいうえお<span class="bolder">あいうえお</span><span class="lighter">あいうえお</span></li>
<li class="w300">あいうえお<span class="bolder">あいうえお</span><span class="lighter">あいうえお</span></li>
<li class="w400">あいうえお<span class="bolder">あいうえお</span><span class="lighter">あいうえお</span></li>
<li class="w500">あいうえお<span class="bolder">あいうえお</span><span class="lighter">あいうえお</span></li>
<li class="w600">あいうえお<span class="bolder">あいうえお</span><span class="lighter">あいうえお</span></li>
<li class="w700">あいうえお<span class="bolder">あいうえお</span><span class="lighter">あいうえお</span></li>
<li class="w800">あいうえお<span class="bolder">あいうえお</span><span class="lighter">あいうえお</span></li>
<li class="w900">あいうえお<span class="bolder">あいうえお</span><span class="lighter">あいうえお</span></li>
</ul>
<ul class="noto-sans-japanese">
<li class="w100">あいうえお<span class="bolder">あいうえお</span><span class="lighter">あいうえお</span></li>
<li class="w200">あいうえお<span class="bolder">あいうえお</span><span class="lighter">あいうえお</span></li>
<li class="w300">あいうえお<span class="bolder">あいうえお</span><span class="lighter">あいうえお</span></li>
<li class="w400">あいうえお<span class="bolder">あいうえお</span><span class="lighter">あいうえお</span></li>
<li class="w500">あいうえお<span class="bolder">あいうえお</span><span class="lighter">あいうえお</span></li>
<li class="w600">あいうえお<span class="bolder">あいうえお</span><span class="lighter">あいうえお</span></li>
<li class="w700">あいうえお<span class="bolder">あいうえお</span><span class="lighter">あいうえお</span></li>
<li class="w800">あいうえお<span class="bolder">あいうえお</span><span class="lighter">あいうえお</span></li>
<li class="w900">あいうえお<span class="bolder">あいうえお</span><span class="lighter">あいうえお</span></li>
</ul>
</body>