3. 글꼴 스타일링

 

글꼴 (font-family)

• 일반적으로 글꼴을 지정할 때 한 가지 글꼴을 선택한다.
• 이때 문서에 저장된 글꼴 중 없을 경우를 대비해 글꼴 이름을 2개 이상 지정하기도 한다.
• 첫 번째 글꼴이 없으면, 그 다음 글꼴을 적용한다.

font-family: <글꼴 이름> | <글꼴 이름>, <글꼴 이름>

 

- 활용 코드

      .font1 {
        font-family: 'Courier New', Courier, monospace;
      }

      .font2 {
        font-family: Arial, Helvetica, sans-serif;
      }

 

 

글자 크기 (font-size)

• 절대 크기: 브라우저에서 지정한 글자 크기
• 상대 크기: 부모 요소의 글자 크기를 기준으로 상대적인 글자 크기 지정
• 크기: 브라우저와 상관없이 글자 크기 직접 지정
• 백분율: 부모 요소의 글자 크기를 기준으로 백분율(%)로 표시

font-size: <절대 크기> | <상대 크기> | <크기> | <백분율>

 

- 크기 지정 방법

• 키워드: xx-small < x-small < small < medium < large < x-large < xx-large
• 단위: px, pt, em(부모 요소의 폰트 크기 기준), rem(루트 요소의 폰트 크기 기준), ex
• 대부분의 브라우저는 폰트 크기의 기본값으로 12pt=16px=1em=100%

<p style="font-size: 10px">font-size:10px</p>
<p style="font-size: 8pt">font-size:8pt</p>

 

 

기울임 (font-style)

• normal: 기본값으로 일반적인 형태
• italic: 이탤릭체
• oblique: 기본 글씨체를 약간 기울인 형태

font-style: normal | italic | oblique

 

 

글자 굵기 (font-weight)

• normal: 기본값, 보통 굵기. 숫자값 400과 동일
• bold: 굵게. 숫자값 700과 동일
• bolder: 부모보다 더 굵게
• lighter: 부모보다 더 가늘게
• 100~900: 100은 가장 가늘게, 900은 가장 굵게

- 활용 코드

  <div style="font-weight: 500">
      <p style="font-weight: bolder">부모가 500일때, bolder는 700</p>
    </div>
    
  <div style="font-weight: 600">
      <p style="font-weight: bolder">
        부모가 600이상일 때, bolder는 무조건 900
      </p>
   </div>
   
  <div style="font-weight: 700">
        <p style="font-weight: lighter">부모가 700일때, lighter는 400</p>
      </div>
      
      <div style="font-weight: 800">
        <p style="font-weight: lighter">부모가 800일때, lighter는 700</p>
  </div>