CSS) font-family

1) font-family

글꼴(서체) 지정

속성 값

값	의미	기본값
글꼴이름	글꼴(서체) 후보 목록을 지정
serif	글꼴 계열 이름을 지정
sans-serif
monospace
cursive
fantasy

 

사용법

font-family: [글꼴후보1, 글꼴후보2...], 글꼴 계열;

.box {
	font-family: Arial, "Open Sans", "돋움", dotum, sans-serif;
}

※ 글꼴 계열은 필수로 입력해야 한다.
이유: 원래는 사용자브라우저에서 웹사이트로부터 폰트를 다운받아서 사용해야 한다. 하지만 폰트는 용량이 크기 때문에 웹사이트에서 사용자브라우저로 폰트를 보내는 것 보다 폰트의 목록들을 주고 사용자브라우저의 운영체제에 있는 폰트를 사용하도록 명시함으로써 다운받아야 하는 용량을 줄여준다. 글꼴 계열을 넣어주는 이유는 만약 글꼴 후보들을 모두 사용자브라우저의 운영체제에 없다면, "글꼴 계열 중에서 알아서 가져다 써라"고 명시해주는 것이다. 

글꼴계열(Generic family)

속성 값

 

html

<div class="serif"> Hello World!</div>
<div class="sans-serif"> Hello World!</div>
<div class="monospace"> Hello World!</div>
<div class="cursive"> Hello World!</div>

css

div {
  font-size: 60px;
}
.serif {
  font-family: serif;
}
.sans-serif {
  font-family: sans-serif;
}
.monospace {
  font-family: monospace;
}
.cursive {
  font-family: cursive;
}

출력결과

※ 기본적으로 브라우저 자신이 가진 폰트를 가지고와서 사용하기 때문에 사용자별로 글짜가 다르게 출력 될 수있다.