font-family
font-family는 글꼴을 설정하는 속성이다.
- 기본값 : 웹브라우저의 기본 글꼴
- 상속 : O
- 애니메이션 : X
font-family 문법
font-family : font | initial | inherit
font: family-name 또는 generic-familyinitial: 기본값으로 설정inherit: 부모 요소의 속성값을 상속받음
font의 종류
- serif
- sans-serif
- monospace
- cursive
- fantasy
만약 글꼴을 여러 개 설정할 때는 쉼표로 구분한다.
font-family : Georgia, "Times New Roman", serif;
1) Georgia 글꼴을 찾는다
2) Georgia 글꼴이 있다면 사용하고, 없다면 Times New Roman 글꼴을 찾는다
3) Times New Roman 글꼴이 있다면 사용하고, 없다면 웹브라우저 설정 명조 계열 글꼴을 사용한다.
한글과 영어의 글꼴을 다르게 하기
글꼴을 여러 개 설정할 때 한글이 없는 글꼴을 앞에 두고, 한글 글꼴을 뒤에 두면 한글과 영어가 다른 글꼴로 표현된다
font-family : Georgia , "Malgun Gothic", serif;
다음과 같이 작성하면 한글은 맑은 고딕, 나머지는 Georgia로 표현된다.
예시
<!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>