속성 값
값 | 의미 | 기본값 |
글꼴이름 | 글꼴(서체) 후보 목록을 지정 | |
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 | 장식(재밌는 문자 표현을 포함하는) 글꼴 계열 |