8-5-2. CSS 속성 : 폰트-글꼴(font-family) {font-family: dotum, '돋움', sans-serif;}

카테고리 없음

김종원 2021. 8. 31. 21:23

8-5-2. CSS 속성 : 폰트-글꼴(font-family)

- 폰트의 글꼴을 지정하는 속성

- 속성값이 상속되기 때문에 대표 폰트를 선언하고, 필요한 부분의 특정 폰트는 재정의 함

▣ 패밀리네임(family name) : Helvetica, Dotum, '돋움', 'Apple SD Gothic Neo';

- 사용할 폰트의 이름의 속성값

- 한 종류의 폰트만이 아닌, 여러 종류의 폰트를 동시에 선언할 수 있음

- 여러 종류의 폰트를 선언할 때, 폰트와 폰트 사이에 콤마( , )로 구분함

- 여러 종류의 폰트가 선언되면, 선언된 순서대로 우선순위가 결정되어 차례대로 적용됨

- 예를 들어, 영문과 한글이 혼합된 content의 경우에, 선언된 다수의 폰트 중 첫 번째 폰트가 영문만

지원된다면 한글을 제외한 모든 영문에는 첫 번째 폰트가 적용되고, 그 다음 두 번째 폰트가 한글이 지원

되면 한글에는 두 번째 폰트가 적용됨

- 사용할 폰트의 이름 중간에 공백이 있거나, 이름이 한글로 되어있는 경우 홑따옴표( ' ' )로 묶어서 선언

- 만약, 한글을 지원하지 않는 디바이스에 한글 이름으로 된 폰트를 선언하면, 해당 폰트를 불러올 수 없으

므로, 항상 한글 이름으로 된 폰트는 영문으로 번역된 이름으로도 한번 더 필히 선언해주어야 함

ex) '돋움' , dotum

▣ 제너릭패밀리(generic family) : serif, sans-serif;

- 위 패밀리네임(family name) 속성값 으로 지정된 글꼴을 사용할 수 없을 경우를 대비한 속성값

- 위와 같은 경우에, 브라우저가 시스템 폰트 내에서 사용자가 의도한 폰트 스타일과 가장 유사한 폰트로

대체하여 적용되도록 함

- 선언순서는 font-family 속성의 속성값 중 '가장 마지막'에 선언해야 함

- 만약, 부모요소의 font-family 속성에서 제너릭패밀리(generic family) 속성값이 선언되었는데, 그 자식

요소에서 다시 font-family 속성을 재선언 하게 된다면, 그 자식요소에서 제너릭패밀리(generic family)

속성값도 다시 선언해야 함

- 폰트 중 serif는 글자 획에 삐침이 '있는' 폰트로, 대표적으로 명조체

- 폰트 중 sans-serif는 획에 삐침이 '없는' 폰트로, 대표적으로 돋움체

- 선언순서 : font-family{패밀리네임1, 패밀리네임2, .... 제너릭패밀리;}

[코드예시]

1 div{font-family: helvetica, dotum, '돋움', san-serif;}