CSS / Reference / font-family

개요

font-family는 글꼴을 설정하는 속성입니다.

  • 기본값 : 웹브라우저의 기본 글꼴
  • 상속 : Yes
  • 애니메이션 : No
  • 버전 : CSS Level 1

문법

font-family: font | initial | inherit
  • font : family-name 또는 generic-family
  • initial : 기본값으로 설정합니다.
  • inherit : 부모 요소의 속성값을 상속받습니다.

font

family-name은 글꼴 이름입니다. 글꼴 이름에 띄어쓰기가 있으면 작은 따옴표 또는 큰 따옴표로 감쌉니다.

generic-family는 글꼴 유형입니다. 글꼴 유형은 다음과 같습니다.

  • serif : 삐침 있는 명조 계열의 글꼴
  • sans-serif : 삐침 없고 굵기가 일정한 고딕 계열의 글꼴
  • monospace : 글자 폭과 간격이 일정한 글꼴
  • cursive : 손으로 쓴 것 같은 필기 계열의 글꼴
  • fantasy : 화려한 글꼴

여러 개의 글꼴 설정

글꼴을 여러 개 설정할 때는 쉼표로 구분합니다. 예를 들어 다음과 같이 했다면...

font-family: Georgia, "Times New Roman", serif;
  1. Georgia 글꼴을 찾습니다.
  2. Georgia 글꼴이 있다면 사용하고, 없다면 Times New Roman 글꼴을 찾습니다.
  3. Times New Roman 글꼴이 있다면 사용하고, 없다면 웹브라우저에서 설정한 명조 계열의 글꼴을 사용합니다.

글꼴은 접속한 기기에 설치되어 있는 글꼴을 사용한다. 따라서 CSS로 설정한 글꼴이 없을 수도 있으므로, 마지막은 generic-family로 정해두는 것이 좋다.

어떤 기기로 접속해도 같은 글꼴을 보여주고 싶다면, 웹폰트를 사용합니다.

영어와 한글 글꼴을 다르게 하기

글꼴을 여러 개 설정했을 때, 첫 번째 글꼴로 표현할 수 없는 것만 다음 글꼴을 사용합니다. 따라서 한글이 없는 글꼴을 앞에 두고, 한글 글꼴을 뒤에 두면 한글과 영어가 다른 글꼴로 표현됩니다.

예를 들어 다음과 같이 하면 한글은 맑은 고딕, 나머지는 Georgia로 표현됩니다.

font-family: Georgia, "Malgun Gothic", serif;

예제

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      .a { font-family: Georgia, serif; }
      .b { font-family: serif; }
      .c { font-family: sans-serif; }
      .d { font-family: monospace; }
      .e { font-family: cursive; }
      .f { font-family: fantasy; }
      .g { font-family: Georgia, "맑은 고딕", serif; }
    </style>
  </head>
  <body>
    <p class="a">font-family: Geogia;</p>
    <p class="b">font-family: serif;</p>
    <p class="c">font-family: sans-serif;</p>
    <p class="d">font-family: monospace;</p>
    <p class="e">font-family: cursive;</p>
    <p class="f">font-family: fantasy;</p>
    <p class="g">한글은 맑은 고딕, 나머지는 Georgia</p>
  </body>
</html>

같은 카테고리의 다른 글
CSS / Reference / empty-cells

CSS / Reference / empty-cells

empty-cells은 표(table)에서 빈 셀의 테두리를 표시할지 말지는 정하는 속성입니다. 기본값 : show 상속 : Yes 애니메이션 : No 버전 : CSS Level 2

CSS / Reference / opacity

CSS / Reference / opacity

opacity로 요소의 투명도를 정할 수 있습니다. 기본값 : 1 상속 : No 애니메이션 : Yes 버전 : CSS Level 3

CSS / Reference / font-variant

CSS / Reference / font-variant

font-variant는 소문자를 작은 대문자, 즉 소문자 크기의 대문자로 바꾸는 속성입니다. 따라서 한글에서는 의미 없는 속성입니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 1

CSS / Reference / box-sizing

CSS / Reference / box-sizing

box-sizing은 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성입니다. 기본값 : content-box 상속 : No 애니메이션 : No 버전 : CSS Level 3

CSS / Reference / text-indent

CSS / Reference / text-indent

들여쓰기와 내어쓰기는 text-indent 속성으로 만듭니다. 값이 양수이면 들여쓰기, 값이 음수이면 내어쓰기가 됩니다. 내어쓰기를 할 때는 왼쪽에 여백을 적절히 줍니다.

CSS / Reference / background-size

CSS / Reference / background-size

background-size는 배경 이미지의 가로 크기와 세로 크기를 정하는 속성입니다. 기본값 : auto 상속 : No 애니메이션 : Yes 버전 : CSS Level 3

CSS / Reference / quotes

CSS / Reference / quotes

quotes는 q 태그로 만든 인용문을 감싸는 큰따옴표를 다른 기호 또는 문자로 바꿔주는 속성입니다. 기본값 : 큰따옴표 상속 : Yes 애니메이션 : No 버전 : CSS Level 2

CSS / Reference / clip

CSS / Reference / clip

clip 속성으로 요소의 특정 부분만 나오도록 할 수 있습니다. 기본값 : auto 상속 : No 애니메이션 : Yes 버전 : CSS Level 2

CSS / Reference / list-style-position

CSS / Reference / list-style-position

list-style-position으로 ul, ol 등의 목록의 마커(marker)의 위치를 정합니다. 기본값 : outside 상속 : Yes 애니메이션 : No 버전 : CSS Level 1

CSS / Reference / text-decoration

CSS / Reference / text-decoration

text-decoration은 선으로 텍스트를 꾸밀 수 있게 해주는 속성입니다. 기본값 : none 상속 : No 애니메이션 : No 버전 : CSS Level 1