카테고리 없음

font-family

컴공 윤서혜 학습일기 2021. 1. 11. 13:25

속성 값

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

 

 

사용법

font-family: [글꼴후보1, 글꼴후보2...], 글꼴계열;
.box {
	font-family: Arial, "Open Sans", "돋움", dotum, sans-serif;
 }
글꼴 계열은 필수로 입력해야 한다.

글꼴자체를 입력한다면, 용량을 많이 차지하게 된다. 그래서 만약에 브라우저를 열었을때, 브라우저가 자체로 가지고 있는 글꼴을 찾아서 제공해달라고 우리는 명령을 해야한다. 이 소스코드를 해석한다면,

1순위로 Arial의 폰트로 출력해달라, 만약에 Arial폰트가 없으면 

2순위로 open sans폰트로 출력해달라, 만약 그것도 없으면

3순위로 돋움을 출력해달라, 만약 그것도 없으면

4순위로 dotum을 출력해달라, 만약 그것도 없으면

5순위로 sans-serif글꼴 계열로 출력해달라는 뜻이다.

즉, 후보를 먼저 제시해주고, 나중에는 후보가 없으면 알아서 계열에 있는 모든 글자중 아무거나 하나를 출력해 달라는 뜻이다.

 

계열 의미
serif 바탕체 계열
sans-serif 고딕체 계열  --> 가장많이 사용한다.
monospace 고정너비(가로폭이 동등한) 글꼴 계열
cursive 필기체 계열
fantasy 장식(재밌는 문자 표현을 포함하는) 글꼴 계열