CSS / 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 / 기초 / !important

CSS / 기초 / !important

CSS는 같은 속성을 여러 번 정의했을 때, 나중에 설정한 값이 적용된다. 만약 나중에 설정한 값이 적용되지 않게 하려면 속성값 뒤에 !important를 붙인다. property: value !important; 예를 들어 다음은 마지막에 설정한 color의 값이 blue이므로, red는 무시하고 문단의 글자색을 파란색으로 만든다. p { color: red; } p { color: blue; } 하지만 다음은 red에 !important가 있으므로 문단의 ...

CSS / Grid / grid-column-gap, grid-row-gap, grid-gap

CSS / Grid / grid-column-gap, grid-row-gap, grid-gap

그리드 아이템 사이의 간격을 정하는 속성은 grid-row-gap, grid-column-gap, grid-gap입니다. grid-column-gap은 열 사이의 간격, grid-row-gap은 행 사이의 간격, grid-gap은 행과 열의 간격을 동시에 정할 수 있는 축약형입니다. 아래는 아이템 사이에 간격이 없는 간단한 그리드입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...

CSS / 선택자(Selector) / 가상 요소와 가상 클래스 순서

CSS / 선택자(Selector) / 가상 요소와 가상 클래스 순서

가상 요소(Pseudo-elements)를 이용하면 특정 요소 앞에 문자열이나 이미지를 넣을 수 있습니다. HTML을 변경하지 않고 요소를 추가할 수 있는 유용한 선택자입니다. 다음은 가상 요소를 이용하여 Hello라는 문자열을 추가한 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> h1:before ...

CSS / 인용문(Blockquote) 꾸미기

CSS / 인용문(Blockquote) 꾸미기

다음과 같은 인용문(blockquote)을 꾸미는 몇 가지 예제이다. <blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet.</p> </blockquote> 예제 1 blockquote { border: 1px solid #27a9e3; margin-left: 0px; margin-right: 0px; padding-left: 20px; padding-right: 20px; border-left: 10px solid #27a9e3; } 예제 2 blockquote:before { ...

CSS / 이미지 버튼 만들기

CSS / 이미지 버튼 만들기

버튼을 꾸미는 방법 중의 하나는 이미지를 이용하는 것입니다. 적당한 크기의 버튼을 만듭니다. 그 크기에 맞는 이미지를 배경으로 정합니다. 다음은 32x32 크기의 돋보기 이미지를 이용해서 버튼을 꾸미는 예제입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> input { ...

CSS / 마우스 오버 효과 / 다른 이미지 보여주기

CSS / 마우스 오버 효과 / 다른 이미지 보여주기

이미지에 마우스를 올렸을 때 다른 이미지가 나타나는 효과를 CSS로 만들어보겠습니다. display 속성 이용하기 다음과 같이 이미지 두 개를 넣고 div로 감쌉니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { ...

CSS / Flex / align-content

CSS / Flex / align-content

flex-wrap 속성의 값이 wrap인 경우, 아이템들의 가로폭의 합이 콘테이너의 가로폭을 넘어가면 아이템이 다음 줄로 내려갑니다. 이때 여러 줄이 되어버린 아이템들의 정렬을 어떻게 할지 정하는 속성이 align-content입니다. 기본값은 stretch로, 높이를 꽉 채웁니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...

CSS / empty-cells / 표에서 빈 셀의 테두리 표시 여부를 정하는 속성

CSS / empty-cells / 표에서 빈 셀의 테두리 표시 여부를 정하는 속성

개요 empty-cells은 표(table)에서 빈 셀의 테두리를 표시할지 말지는 정하는 속성입니다. 기본값 : show 상속 : Yes 애니메이션 : No 버전 : CSS Level 2 문법 empty-cells: show | hide | initial | inherit show : 빈 셀의 테두리를 보여줍니다. hide : 빈 셀의 테두리를 숨깁니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype html> <html lang="ko"> <head> ...

CSS / 반응형 레이아웃 만들기

CSS / 반응형 레이아웃 만들기

반응형 웹디자인 웹사이트의 레이아웃을 만들 때 방문자가 사용하는 모니터의 화면 해상도를 고려해야 합니다. 너무 크게 가로폭을 만들면 작은 해상도의 모니터로 접속했을 때 가로 스크롤이 생겨 컨텐츠를 보는 게 불편하기 때문입니다. 특히 스마트폰이나 태블릿 등 모바일 기기는 화면이 작기 때문에 가독성에 더욱 신경써야 합니다. 이러한 문제를 해결하는 방법 중의 하나가 반응형 웹디자인입니다. 해상도에 따라 ...

CSS / 표(table) 꾸미기 / 틀 고정(행 또는 열 고정) 만들기

CSS / 표(table) 꾸미기 / 틀 고정(행 또는 열 고정) 만들기

엑셀에 틀 고정이라는 기능이 있다. 틀 고정을 사용하면 상하 또는 좌우로 스크롤해도 항상 보이는 행 또는 열을 만들 수 있다. CSS로도 같은 효과를 낼 수 있다. 이를 구현하기 위해 사용하는 속성은 display: sticky이다. 예를 들어 다음과 같은 표가 있다고 하자. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...