font 속성

font 속성은 다음과 같습니다.

 

font-family	글꼴
font-style	이탤릭체 등의 글꼴의 스타일 지정
font-size	글자 크기
font-weight	글자 두께
line-height	줄 간격

 

1. font-family

font-family 속성값이 여러 개의 글꼴로 설정되어 있으면, 웹 브라우저는 위에서부터 순서대로 글꼴을 읽어 들입니다.

만약 사용자의 컴퓨터에 첫 번째로 읽어 들인 글꼴이 없으면 다음 글꼴을 확인하게 됩니다.

 

<style>

    .serif { font-family: "Times New Roman", Times, serif; }
    
</style>

 

 

2. font-style

font-style 속성은 주로 이탤릭체를 사용하기 위해 사용하며, 다음과 같이 3가지의 속성값을 가집니다.

 

<style>

    .italic { font-style: italic; }

</style>

 

 

3. font-size

 

font-size 는 글자 크기를 의미합니다.

 

<style>

    .heading { font-size: 50px; }

</style>

 

 

 

4. font-weight

font-weight 속성은 텍스트를 얼마나 두껍게 표현할지를 설정합니다.

 

사용할 수 있는 속성값에는 lighter, normal, bold, bolder 등이 있습니다.

 

<style>

    .we { font-weight: 600; }
    .bold { font-weight: bold; }

</style>

 

 

5. line-height

line-height 속성은 줄 간격을 설정합니다.

 

<style>

    .we { line-height: 50%; }

</style>