[CSS] font-family 속성 (serif, sans-serif, monospace 등 차이점)

font-family 에 대해 심도있는 내용을 모르다 보니

내용을 정리하게 됩니다.

font-family는 아래와 같은 속성값을 가지게 됩니다.

font-family:font-name / generic-name [font-name, generic-name];

font-name과 generic-name 은 별개로 사용할 수 있지만 같이도 사용할 수 있습니다.

font-name과 generic-name 이 정확히 어떠한 의미인지 알아보죠.

font-name(글꼴 이름) : Arial, Verdana, 궁서, 굴림, 돋움, 나눔고딕 등...

generic-name(모양이 비슷한 글꼴들 - 기본폰트) : serif(바탕체), sans-serif(고딕체), cursive(필기체), fantasy(장식체), monospace(고정폭)

generic-name 폰트는 단순하게 설명하자면 font-name의 대채 수단이 됩니다.

사용자의 컴퓨터에 font-name 폰트가 없다면 generic-name 폰트로 대체가 됩니다.

generic-name 폰트집합 설명

• serif
  문자의 끝 부분에 장식되어 있는 부가적인 짧은 선
• sans-serif
  문자의 끝 부분에 장식이 없는 선 (sans의 의미는 "~이 없는" 입니다.)
• monospace
  글자의 폭이 같은 글꼴을 말합니다. 그와 반대로 non-monospace 글꼴들은 각 글자들마다의 폭이 각각 서로 다릅니다.

test_sample.html

화면은 test_sample.html 에서 확인하실 수 있습니다.

font-family 사용법

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

1. 쌍따옴표(따옴표)는 font-name 글꼴을 작성할 때 사용하는데,

한글일 경우 무조건 쌍따옴표(따옴표)를 사용합니다. 영문폰트더라도 공백이 있다면 쌍따옴표(따옴표)를 넣어 표기합니다.

2. generic-name 글꼴은 쌍따옴표(따옴표)를 사용하지 않습니다.

3. 브라우저에 따라 한글폰트의 한글이름과 영문이름을 제대로 인식 못하는 경우를 대비해 한글명과 영문명을 꼭 같이 작성해 줍니다.

4. 한글은 한글폰트로 영문은 영문폰트로 나오길 원한다면 위와같이 영문폰트명을 앞에 적고, 뒤에 한글폰트를 적습니다. 이는 돋움에도 영문폰트가 존재하나 돋움보다 앞서 영문폰트명을 적어주면 영문은 영문폰트(Times New Roman)로 나오게 됩니다.

font-family 조합

font-name과 generic-name 을 어떻게 사용하냐에 따라 안전한 웹글꼴을 표현할 수 있습니다.

즉 사용자 디바이스에서 font-name의 font가 없다면 generic-name의 font를 사용하여 비슷하게 표현할 수 있습니다.

https://www.thoughtco.com/web-safe-fonts-3467430

위 URL 에서 참고하여 안전한 웹글꼴이 무엇들이 있는지 알아 보았습니다.

다음과 같이 font-name 폰트를 generic-name 폰트로 대체합니다.

font-name	generic-name
Courier	serif
Courier New
Georgia
Times
Times New Roman
Arial	snas-serif
Arial Black
Tahoma
Trebuchet MS
Verdana
Courier	monospace
Courier New
Lucida Console
Monaco

참고 : https://www.thoughtco.com/web-safe-fonts-3467430

한글글꼴

영문폰트에 비해 한글폰트의 선택의 폭이 좁습니다.

한글폰트 중에서도 가변폭 글꼴과 고정폭 글꼴이 있는데,

고정폭 글꼴은 글자 사이의 간격을 조정할 수 없으므로 가변폭 글꼴 사용을 권장합니다.

가변폭 글꼴 : 굴림(Gulim), 돋움(Dotum), 바탕(Batang), 궁서(Gungsuh)

고정폭 글꼴 : 굴림체(GulimChe), 돋움체(DotumChe), 바탕체(BatangChe), 궁서체(GungsuhChe)

주의 사항

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

font-family: Arial, Dotum, "돋움", sans-serif;

위와 같이 설정하였다고 가정한다면,

크롬, 파이어폭스, 사파리에서 영문은 Arial 폰트로 한글은 돋움으로 표현되나

익스플로러와 오페라에서는 영문은 Arial로 표현하고 한글은 브라우저 자체에서 글꼴을 선택하여 표현합니다.

익스플로러에서는 굴림으로 오페라에서는 궁서로 나옵니다.

지금까지 font-family의 속성에 대한 내용을 알아보았습니다.

제가 아는 부분도 있지만 새로운 사실도 많네요. 아직 부족합니다.;;;;

잘못된 내용이나 추가해야할 부분이 있다면 댓글 그리고 공감 부탁드립니다.

감사합니다.