font-family를 자주 사용하나, 내가 설정한 폰트 뒤에 오는 sans-serif가 뭔지 몰라 이번에 자세히 공부하기 위해 찾아보았다.

font-family는 글꼴의 집합체로 볼 수 있으며, font-name과 generic-name으로 나눌 수 있다.

font-name은 글꼴 이름으로 내가 직접 해당 폰트를 지정해서 사용 할 수 있음을 애기한다. 예를 들어 궁서, 굴림, 돋움, 나눔고딕이 이에 해당된다.

generic-name은 모양이 비슷한 글꼴들이며, 만약 사용자의 컴퓨터에 font-name이 설치되지 않았을 경우 대체되어 사용된다. serif(바탕체), sans-serif(고딕체), cursive(필기체) 등이 이에 해당된다.

작성법

font-family: "Times New Roman", Dotum, "돋움", serif, sans-serif;

1. 쌍따옴표(따옴표)는 font-name 글꼴을 작성할 때 사용한다.
2. generic-name 글꼴은 쌍따옴표(따옴포)를 사용하지 않는다.
3. 브라우저에 따라 한글폰트의 한글이름과 영문이름을 제대로 인식 못하는 경우를 대비해 한글명과 영문명을 꼭 같이 작성한다.
4. 한글은 한글폰트로 영문은 영문폰트로 나오길 원한다면 위와 같이 영문폰트명을 앞에 적고, 뒤에 한글폰트를 적는다. 이는 도움에도 영문폰트가 존재하나 돋움보다 앞서 영문폰트를 적어주면 영문은 영문폰트로 나오게 된다.

주의 사항

font-family 의 설정을 제대로 하였어도 브라우저 종류나 낮은 버전의 브라우저에서 다르게 표현될 수 있다.

참고

https://kcmschool.com/124