.normal {font-weight: normal;}
.lighter {font-weight: lighter;}
.bolder {font-weight: bolder;}
.n300 {font-weight: 300}
.n400 {font-weight: 400}
.n500 {font-weight: 500}
.n700 {font-weight: 700}
<!DOCTYPE html>
<html lang="ko">
<head></head>
<body>
<h1>font-weight</h1>
<p class="normal">This is a normal.</p>
<p class="lighter">This is a lighter.</p>
<p class="bolder">This is a bolder.</p>
<p class="n300">This is a 300.</p>
<p class="n400">This is a 400 = normal.</p>
<p class="n500">This is a 500.</p>
<p class="n700">This is a 700 = bold.</p>
</body>
</html>