font-family

m-vault·2022년 2월 24일
0

CSS

목록 보기
1/4
post-thumbnail

font-family - family-name & generic family

font-family는 family-namegeneric family로 나뉨

  1. family-name : 글꼴 이름

    → arial, verdana, 나눔고딕, 궁서, 굴림 등

  2. generic family : 모양이 비슷한 글꼴들의 이름

    → Serif (바탕체) , Sans-serif (고딕체), Cursive(필기체), Fantasy(장식체), Monospace(고정폭)


font-family 속성 사용법

font-family:"Times New Roman", Dotum, "돋움", serif, sans-serif;
  1. 하나 이상의 글꼴을 열거할 땐 쉼표 , 를 사용
  2. font-name을 표기할 땐 쌍따옴표 ""를 사용해 표기
    • 한글일 경우 무조건 쌍따옴표(따옴표) 사용
    • 영문 폰트여도 공백이 있다면 쌍따옴표(따옴표) 사용해 표기
  3. generic-name을 표기할 땐 쌍따옴표(따옴표) 미사용
  4. 한글이름과 영문이름을 제대로 인식하지 못하는 경우를 대비해, 한글명과 영문명 함께 작성
  5. 시작은 family-name으로 작성하고, 마지막은 항상 generic family로 설정함
    • → 먼저 작성된 글꼴부터 적용의 우선순위가 높음
    • 사용자가 해당 글꼴이 없을 경우 비슷한 글꼴로 표시하기 위함

serif / sans-serif / monospace 차이 비교

  1. serif : 문자 끝 부분에 장식이 되어 있는 부가적인 짧은 선

  2. sans-serif : 문자의 끝 부분에 장식이 없는 선 (sans의 의미는 ‘~이 없는’ 임)

  3. monospace : 글자의 폭이 같은 글꼴.

    → non-monospace 글꼴은 제각각 글자의 폭이 다름


안전한 폰트 조합 참고

Font Stacks You Can Use for Reliable HTML Fonts on Your Web Pages


한글 폰트

한글 폰트는 영문폰트에 비해 선택의 폭이 좁음

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

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

  • 가변폭 글꼴 : 굴림(Gulim), 돋움(Dotum), 바탕(Batang), 궁서(Gungsuh)
  • 고정폭 글꼴 : 굴림체(GulimChe), 돋움체(DotumChe), 바탕체(BatangChe), 궁서체(GungsuhChe)

참고 자료

[html/css] 글꼴을 지정하는 font-family 속성(serif, sans-serif차이)
[CSS] font-family 속성 (serif, sans-serif, monospace 등 차이점)

profile
525,600분, 유한한 시간 속 더이상 망설이지 않기를

0개의 댓글