글자 관련 스타일

font-size : 글꼴의 크기를 지정하는 속성

px : 픽셀(화면 해상도)
pt : 포인트(1pt = 0.72인치)
% : 상위 요소 크기에 대한 백분율
em : 1em == 100%
크롬 브라우저 기준
기본 글꼴 크기 : 16px

<ul id="size-test">
        <li>픽셀(px)</li>
        <li>포인트(pt)</li>
        <li>퍼센트(%)</li>
        <li>em</li>
    </ul>

#size-test > li:nth-child(1){font-size : 24px;}
#size-test > li:nth-child(2){font-size : 18pt;}
#size-test > li:nth-child(3){font-size : 150%;}
#size-test > li:nth-child(4){font-size : 1.5em;}

font-weight : 글꼴의 굵기(두께)를 지정하는 속성

숫자 : (얇은)100 ~ 900(두께용) (100단위)
normal : 폰트에 지정된 기본 두께(400)
bold : 굵게(700)
bolder : 상속 받은 두께보다 더 굵게
lighter : 상속 받은 두께보다 더 얇게

<ul id="weight-test">
       <li>테스트1</li>
       <li>테스트2</li>
       <li>테스트3</li>
       <li>테스트4</li>
       <li>테스트5</li>
   </ul>

/* font-weight */
 #weight-test > li{
    font-size: 34px;
 }


 #weight-test >li:nth-child(1){ font-weight: 600;}
 #weight-test >li:nth-child(2){ font-weight: bold;}
 #weight-test >li:nth-child(3){ font-weight: bolder;}
 #weight-test >li:nth-child(4){ font-weight: lighter;}
 #weight-test >li:nth-child(5){ 
    font-weight: normal;
    font-style: italic;
}

font-family : 글꼴을 지정하는 속성

<ul id="family-test1" class="cls">
        <li>가나다라, 조미현, ABCD, abcd, 1234 , !@#$</li>
        <li>가나다라, 이현경, ABCD, abcd, 1234 , !@#$</li>
        <li>가나다라, 김덕근, ABCD, abcd, 1234 , !@#$</li>
    </ul>

/* font-family */


.cls > li{
    font-size: 24px;
}


#family-test1 > li:nth-child(1){
    font-family: '궁서';   /* 설치된 폰트인 경우 가능 */
}

#family-test1 > li:nth-child(2){
    font-family: '배달의민족체';   /* 없는 폰트인 경우 기본폰트로 나옴 */
}

#family-test1 > li:nth-child(3){
    font-family: '배달의민족체', '굴림체';   /* 설치된 폰트인 경우 가능 */
}