[CSS] 글꼴 설정 / font-family 속성

CSS에서 글꼴 지정은 font-family 속성으로 지정합니다

font-family 속성에는 하나 이상의 속성값을 지정할수 있는데요
font-family 속성 값이 하나 이상일때는 아래의 예시처럼
콤마(,)로 구분되어집니다


div{font-family:Helvetica, Arial;}


그렇다면 왜 하나 이상의 속성값을 지정하는 걸까요?

컴퓨터가 사용할수 있는 글꼴은
컴퓨터 운영체제 글꼴이나 컴퓨터에 설치된 소프트웨어 글꼴,
사용자가 직접 설치한 글꼴 등일겁니다

만약 CSS font-family 속성이 지정할수 있는 글꼴이 하나밖에 되지 않는다면
모든 컴퓨터 환경에서 공통으로 지원되는 아주 적은 범위의
글꼴만 사용할수 있게 됩니다
그렇기 때문에 font-family속성을 통해 여러 글꼴을 지정해줌으로써
다양하고 상황에 맞는 글꼴을 사용하는거죠

매우 간단한 이유죠^^

※여기서 한가지 팁!
(font-family 속성의 글꼴을 여러개로 지정해줄때는 크기와 형태가 비슷한 글꼴을 지정해주시는게 좋습니다)


또한 CSS글꼴 font-family속성을 사용하다 보면
Time New Roman 과 같이 글꼴 이름이 띄어쓰기가 포함되는 글꼴이 있을텐데요
이럴때는 작은따옴표('') 또는 큰따옴표("") 안에 글꼴 이름을 적어서 사용하시면 됩니다

div{font-family:Time,"Time New Roman",serif}


CSS의 글꼴 설정을 하다보면 애기치 못한 에러 상황이 발생하는 경우도 있는데요
이러한 에러 상황을 대비하기 위해 공통으로 사용되는 글꼴을 지정해주는게 좋은데요

CSS제공 하는 공통 글꼴 총 5섯 가지 입니다

1. serif
2. sans-serif
3. monospace
4. cursive
5. fantasy