[CSS] 폰트(font)

폰트(font)

---

CSS에서 사용할 수 있는 font 속성

1.font-family

2.font-style

3.font-variant

4.font-weight

5.font-size

 

font-family 속성

font-family 속성은 하나의 글꼴만을 설정할 수도 있고, 여러 개의 글꼴을 같이 설정할 수도 있습니다.

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

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

이런 방식으로 계속해서 읽어 들인 글꼴이 존재하는지를 확인하여, 읽어 들인 글꼴이 사용자의 컴퓨터에 존재하면 해당 글꼴로 표시하게 됩니다.

 

글꼴의 이름이 한 단어 이상으로 이루어지면 반드시 따옴표를 사용하여 둘러 쌓아야 합니다.

또한, 여러 개의 글꼴을 나열할 때에는 쉼표(,)로 구분 짓습니다.

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

 

font-style 속성

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

 

- normal : 텍스트에 어떠한 스타일도 적용하지 않습니다.

- italic : 텍스트를 이탤릭체로 나타냅니다.

- oblique : 텍스트를 기울입니다. 이 속성값은 italic과 매우 유사하지만 지원하는 웹 브라우저가 거의 없습니다.

 

<style>
  .normal {
    font-style: normal;
  }

  .italic {
    font-style: italic;
  }

  .oblique {
    font-style: oblique;
  }
</style>

 

font-variant 속성

font-variant 속성은 속성값이 small-caps로 설정되면, 텍스트에 포함된 영문자 중 모든 소문자를 작은 대문자(small-caps) 글꼴로 변경시킵니다.

이때 영문자 중 대문자는 기존 크기 그대로 출력합니다.

작은 대문자(small-caps) 글꼴이란 텍스트의 기존 대문자보다는 약간 작은 크기의 대문자를 의미합니다.

<style>
  .normal {
    font-variant: normal;
  }
  .smallCaps {
    font-variant: small-caps;
  }
</style>

 

font-variant 예제

 

font-weight 속성

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

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

또한, 100, 200, 300, ... , 900 등과 같이 숫자로 텍스트의 두께를 설정할 수도 있습니다.

 

normal: 보통 폰트, 숫자값 400과 동일
bold : 굵은 폰트, 숫자값 700과 동일

bolder : 부모가 100~300이면 400으로 400~500이면 700으로 600이상이면 900으로 굵기가 바뀐다.

lighter : 부모가 100~500이면 100으로 600~700이면 400으로 800이상이면 700으로 굵기가 바뀐다.

<p style="font-weight: normal">font-weight: normal</p>
<p style="font-weight: bold">font-weight: bold;</p>
<p style="font-weight: bolder">font-weight: bolder;</p>
<p style="font-weight: lighter">font-weight: lighter;</p>

 

font-size 속성

font-size 속성은 텍스트의 크기를 설정합니다.

 

웹 디자인에서 텍스트의 크기는 매우 중요한 표현 요소입니다. 

하지만 제목을 표현하기 위해서 텍스트의 크기만을 크게 해서는 안 됩니다.

이때에는 제목을 위한 HTML 요소인 <h1>태그부터 <h6>태그를 사용해야 합니다.

절대 값 : xx-small, x-smal, small, medium, large, x-large, xx-large
상대 값 : larger, smaller
길이 값 : em(부모 요소의 폰트 크기를 기준), rem(루트 요소의 폰트 크기 기준), px, pt(1pt = 0.72인치)
퍼센트(백분율) 값 : 부모 요소의 폰트 크기의 비율

대부분의 브라우저는 폰트 크기의 기본 값으로 12pt=16px=1em=100%

<style>
  body {
    font-size: 100%;
  }
  #large {
    font-size: 2.5em;
  }
  #small {
    font-size: 0.7em;
  }
  #fixed {
    font-size: 20px;
  }
</style>

 

참고자료

http://www.tcpschool.com/css/css_basic_fonts