본문 바로가기
Front-end/HTML

폰트속성 한꺼번에 표현하기

by mooyou 2018. 12. 20.
728x90
300x250

font: <font-style><font-variant><font-weight><font-size/line-height><font-family> | caption | icon | menu | message-box | small-caption | status-bar


font-style : 폰트 스타일을 지정해 줄 수 있다.

font-variant : 텍스트를 작은 대문자 글꼴로 표시할지 여부를 나타 냅니다.

font-weight : 폰트 두께설정

font-size / line-height : 가끔 숫자 / 숫자 예를들어서 14/18 이런식으로 표현된게 있다. 앞에 숫자는 폰크 크기, 뒤에숫자는 줄간격이다.

font-family : 글꼴


특정 키워드를 입력해서 그것에 어울리는 글꼴 스타일로 표현할 수 도 있다.

font-*  font-로 시작하는 글꼴 관련 속성을 한꺼번에 표시한다.

caption : 캡션에 어울리는 글꼴 스타일로 표시

icon : 아이콘에 어울리는 글꼴 스타일로 표시

menu 드롭다운 메뉴에 어울리는 폰트 스타일로 표시

message-box : 대화상자에 어울리는 글꼴 스타일로 표시

small-cation 작은캡션에 어울리는 폰트 스타일로 표시

status-bar 상태 표시줄에 어울리는 폰트 스타일로 표시



사용예시


p{font:16px/20px "Nanum Gothic"}

p{font:120%/120%}


120%/120% 앞에는 부모요소의 글자크기를 기준으로 120% / 뒤에 줄간격은 현재의 글자크기 기준이다.

728x90
반응형

댓글