CSS / font-weight / 글자 굵기 정하는 속성
개요
font-weight
로 글자의 굵기를 정한다.
- 기본값 :
normal
- 상속 : Yes
- 애니메이션 : Yes
- 버전 : CSS Level 1
문법
font-weight: normal | bold | bolder | lighter | number | initial | inherit
normal
: 보통 굵기이다. 숫자 400과 같다.bold
: 굵은 굵기이다. 숫자 700과 같다.bolder
: 상속된 값보다 굵은 굵기다.lighter
: 상속된 값보다 얇은 굵기이다.number
: 100, 200, 300, 400, 500, 600, 700, 800, 900initial
: 기본값으로 설정한다.inherit
: 부모 요소의 값을 상속받는다.
예제 1
- 나타낼 수 있는 굵기는 글꼴에 따라 다르다. 예를 들어, 본고딕(Noto Sans CJK KR)이 맑은 고딕(Malgun Gothic)보다 표현할 수 있는 굵기가 더 많다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> table { width: 100%; } th { text-align: left; color: blue; } td { vertical-align: top; } .jb-font-1 { font-family: "Malgun Gothic"; } .jb-font-2 { font-family: "Noto Sans CJK KR"; } .jb-normal { font-weight: normal; } .jb-bold { font-weight: bold; } .jb-100 { font-weight: 100; } .jb-200 { font-weight: 200; } .jb-300 { font-weight: 300; } .jb-400 { font-weight: 400; } .jb-500 { font-weight: 500; } .jb-600 { font-weight: 600; } .jb-700 { font-weight: 700; } .jb-800 { font-weight: 800; } .jb-900 { font-weight: 900; } </style> </head> <body> <table> <tr> <th>Malgun Gothic</th> <th>Noto Sans CJK KR</th> </tr> <tr> <td class="jb-font-1"> <p class="jb-normal">font-weight normal - Lorem Ipsum Dolor</p> <p class="jb-bold">font-weight bold - Lorem Ipsum Dolor</p> <p class="jb-100">font-weight 100 - Lorem Ipsum Dolor</p> <p class="jb-200">font-weight 200 - Lorem Ipsum Dolor</p> <p class="jb-300">font-weight 300 - Lorem Ipsum Dolor</p> <p class="jb-400">font-weight 400 - Lorem Ipsum Dolor</p> <p class="jb-500">font-weight 500 - Lorem Ipsum Dolor</p> <p class="jb-600">font-weight 600 - Lorem Ipsum Dolor</p> <p class="jb-700">font-weight 700 - Lorem Ipsum Dolor</p> <p class="jb-800">font-weight 800 - Lorem Ipsum Dolor</p> <p class="jb-900">font-weight 900 - Lorem Ipsum Dolor</p> </td> <td class="jb-font-2"> <p class="jb-normal">font-weight normal - Lorem Ipsum Dolor</p> <p class="jb-bold">font-weight bold - Lorem Ipsum Dolor</p> <p class="jb-100">font-weight 100 - Lorem Ipsum Dolor</p> <p class="jb-200">font-weight 200 - Lorem Ipsum Dolor</p> <p class="jb-300">font-weight 300 - Lorem Ipsum Dolor</p> <p class="jb-400">font-weight 400 - Lorem Ipsum Dolor</p> <p class="jb-500">font-weight 500 - Lorem Ipsum Dolor</p> <p class="jb-600">font-weight 600 - Lorem Ipsum Dolor</p> <p class="jb-700">font-weight 700 - Lorem Ipsum Dolor</p> <p class="jb-800">font-weight 800 - Lorem Ipsum Dolor</p> <p class="jb-900">font-weight 900 - Lorem Ipsum Dolor</p> </td> </tr> </table> </body> </html>
예제 2
bolder
나 lighter
는 상속된 값에 따라 다른 굵기로 나온다. 다음은 상속된 굵기가 300일 때와 700일 때, bolder
와 lighter
가 어떻게 나오는지 비교하는 예제이다.
<!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { font-family: "Noto Sans CJK KR"; } .jb-300 { font-weight: 300; } .jb-700 { font-weight: 700; } .jb-bolder { font-weight: bolder; } .jb-lighter { font-weight: lighter; } </style> </head> <body> <div class="jb-300"> <p>font weight 300 - Lorem Ipsum Dolor</p> <p class="jb-bolder">font weight bolder - Lorem Ipsum Dolor</p> <p class="jb-lighter">font weight lighter - Lorem Ipsum Dolor</p> </div> <div class="jb-700"> <p>font weight 700 - Lorem Ipsum Dolor</p> <p class="jb-bolder">font weight bolder - Lorem Ipsum Dolor</p> <p class="jb-lighter">font weight lighter - Lorem Ipsum Dolor</p> </div> </body> </html>