CSS 글꼴속성 (Font Property)

흔히 폰트라고 부르는 글꼴과 관련된 CSS 속성을 다룹니다. 글꼴을 지정하고 자간을 조정하는데 필요한 속성입니다.

font

축약 속성이며 시스템 글꼴 값을 제어한다.

object.style.font="italic small-caps bold 12px arial,sans-serif"

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
지원	지원	지원	지원	지원

inherit 값은 IE7 이하는 지원하지 않는다. IE8은 !DOCTYPE이 필요하다. IE9부터 정상 지원한다.

font-family

글꼴 종류를 지정하며 값이 상속된다.

body { font-family :'나눔고딕', 'Malgun Gothic', sans-serif;}

• 지정한 글꼴 순서대로 존재 유무를 파악하고 그것을 적용한다.
• 콤마로 구분해 나열한 글꼴 중 맨 앞에 지정한 글꼴을 선택하라고 브라우저에게 명령한다. 브라우저가 그 글꼴을 찾지 못하면 순차적으로 뒤에 지정한 글꼴를 찾는 방식이다. 나열한 글꼴 중 맨뒤에는 sans-serif, serif, monospace 같은 글꼴명 상수 중 하나를 지정해야 한다. 빈칸이 포함된 글꼴명과 한글글꼴명은 따옴표로 반드시 묶어야 한다.

속성값

• 글꼴이름 : 글꼴 이름을 지정한다.
• inherit : 부모 요소로부터 값을 상속 받는다.

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
지원	지원	지원	지원	지원

inherit 값은 IE7 이하는 지원하지 않는다. IE8은 !DOCTYPE이 필요하다. IE9부터 정상 지원한다.

font-size-adjust

CSS3에 추가된 속성으로 소문자와 대문자 사이의 비율을 유지하고 font-size 속성 값을 조정하여 x-height 속성 값이 글꼴에 관계없이 고정되게 함으로써 가독성을 유지한다. 값이 상속된다.

div {font-size-adjust: 0.58;}

• 일반적으로 font-family에 지정한 글꼴에 따라 글꼴 크기가 다르기 때문에 문제가 될 여지가 있다. 이때 font-size-adjust 속성으로 글꼴 크기를 지정해 놓으면 이에 대한 예방이 된다.
• 대소문자 사이의 비율은 font x-height/font size 값이다.

속성값

• nubmer(숫자) : 사용할 비율을 지정한다.
• none : 기본값으로 글꼴 크기를 변경하지 않는다.
• inherit : 부모 요소로부터 값을 상속 받는다.

자바스크립트 문법

object.style.fontSizeAdjust="0.58"

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
미지원	지원	미지원	미지원	미지원

font-stretch

CSS3에 추가된 속성으로 글자의 폭을 넓게 늘이거나 좁게 축소한다. 해당 속성은 아직 지원하는 브라우저가 없다.

div {font-stretch: expanded;}

속성값

ultra-condensed : 할수있는 한 폭을 좁힌다.
• extra-condensed : condensed 보다 좁지만, ultra-condensed 보다 폭을 좁히진 않는다.
• condensed : semi-condensed 보다 좁지만, extra-condensed 보다 폭을 좁히진 않는다.
• semi-condensed : normal 보다 좁지만, condensed 보다 폭을 좁히진 않는다.
• normal : 기본값으로, 글꼴을 넓히거나 좁히지 않는다.
• semi-expanded : normal 보다 넓지만, expanded 보다 폭을 넓히진 않는다.
• expanded : semi-expanded 보다 넓지만, extra-expanded 보다 폭을 넓히진 않는다.
• extra-expanded : expanded 보다 넓지만, ultra-expanded 보다 폭을 넓히진 않는다.
• ultra-expanded : 할수있는 한 폭을 넓힌다.
• inherit : 부모 요소로부터 값을 상속 받는다.

자바스크립트 문법

object.style.fontStretch="expanded"

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
미지원	미지원	미지원	미지원	미지원

font-size

글꼴의 크기를 지정한다.

h1 {font-size:250%;}
h2 {font-size:200%;}
p {font-size:100%;}

• 부모 요소의 글자 크기에 비례하게 하려면 em이나 백분율 값을 지정한다.
• 구체적인 크기를 설정하려면 px 값을 지정하면 되지만, 레이아웃 안에서 그것이 어떤 크기로 표시될지는 알 수 없다. 왜냐하면 사용자가 문서 화면을 확대하거나 축소하면 브라우저가 글자 크기를 늘리거나 줄이기 때문이다. 그리고 IE6는 사용자가 화면을 확대해도 고정 크기가 지정된 글자를 늘이지 못하므로 접근성에 문제가 생긴다.

속성값

• xx-small : 아래 예제 참고
• x-small : 아래 예제 참고
• small : 아래 예제 참고
• medium : 아래 예제 참고
• large : 아래 예제 참고
• x-large : 아래 예제 참고
• xx-large : 아래 예제 참고
• smaller : 아래 예제 참고
• larger : 아래 예제 참고
• length(길이) : 부동 소수점 숫자 뒤에 절대 단위 지정자( cm , mm , in , pt , pc ) 또는 상대 단위 지정자( em , ex , px )가 오는 값을 지정한다.
• %(퍼센트) : 퍼센트 부호(%)가 뒤에 오는 정수를 지정한다.
• intial : 기본값을 지정한다.
• inherit : 부모 요소로부터 값을 상속 받는다.

font-size 데모 보기

자바스크립트 문법

object.style.fontSize="larger"

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
지원	지원	지원	지원	지원

inherit 값은 IE7 이하는 지원하지 않는다. IE8은 !DOCTYPE이 필요하다. IE9부터 정상 지원한다.

font-style

글꼴의 모양을 지정한다.

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

속성값

• normal : 기본값으로 보통 글꼴 모양으로 지정한다.
• italic : 이탤릭 모양으로 지정한다.
• oblique : 비스듬한(oblique) 모양으로 지정한다.
• inherit : 부모 요소로부터 값을 상속 받는다.

자바스크립트 문법

object.style.fontStyle="italic"

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
지원	지원	지원	지원	지원

inherit 값은 IE7 이하는 지원하지 않는다. IE8은 !DOCTYPE이 필요하다. IE9부터 정상 지원한다.

font-variant

글꼴을 작은 대문자로 지정한다.

p.small {font-variant:small-caps;}

• 글자 크기를 줄이는 font-size:0.8em 과 함께 text-transform:uppercase를 지정하면 smallcaps과 비슷한 효과를 얻을수 있다.(smallcaps를 지원하는 기본폰트가 적기때문에)

속성값

• normal : 기본값으로 보통 글꼴을 지정한다.
• small-caps : 작은 대문자 글꼴을 지정한다.
• inherit : 부모 요소로부터 값을 상속 받는다.

자바스크립트 문법

object.style.fontVariant="small-caps"

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
지원	지원	지원	지원	지원

inherit 값은 IE7 이하는 지원하지 않는다. IE8은 !DOCTYPE이 필요하다. IE9부터 정상 지원한다.

font-weight

글꼴의 두께를 지정한다.

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}

속성값

• normal : 기본값으로 보통 두께를 지정한다.
• bold : 굵은 글꼴을 지정한다.
• bolder : 두께가 기본 bold 이상인 글꼴을 지정한다.
• lighter : 보통보다 두께가 얇은 글꼴을 지정한다.
• 100, 200, 300, 400, 500, 600, 700, 800, 900 : 100이 가장 얇고 숫자가 커질수록 더 굵어 진다. 400이 보통인 normal과 같고 700이 굵은인 bold와 같다.

font-weight 데모 보기

자바스크립트 문법

object.style.fontWeight="900"

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
지원	지원	지원	지원	지원

inherit 값은 IE7 이하는 지원하지 않는다. IE8은 !DOCTYPE이 필요하다. IE9부터 정상 지원한다.

@font-face

웹폰트를 참조

letter-spacing

글자 간 추가 공간(자간)을 지정한다.

h1 {letter-spacing:2px;}
h2 {letter-spacing:-3px;}

• 음수값이 지정되면 글자 간 간격을 줄인다.

속성값

• normal : 기본값으로 기본 간격으로 지정한다.
• length(길이) : 부동 소수점 숫자 뒤에 절대 단위 지정자( cm , mm , in , pt , pc ) 또는 상대 단위 지정자( em , ex , px )가 오는 값을 지정한다.
• inherit : 부모 요소로부터 값을 상속 받는다.

letter-spacing 데모 보기

자바스크립트 문법

object.style.letterSpacing="3px"

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
지원	지원	지원	지원	지원

inherit 값은 IE7 이하는 지원하지 않는다. IE8은 !DOCTYPE이 필요하다. IE9부터 정상 지원한다.

line-height

줄 간격을 지정한다.

p.small {line-height:90%;}
p.big {line-height:200%;}

속성값

• normal : 기본값으로 기본 높이를 지정한다.
• number(숫자) : 현재 font-size의 배율을 기준으로 숫자 값을 지정한다. 현재 font-size값을 1로 기준
• length(길이) : 부동 소수점 숫자 뒤에 절대 단위 지정자( cm , mm , in , pt , pc ) 또는 상대 단위 지정자( em , ex , px )가 오는 값을 지정한다.
• %(퍼센트) : 퍼센트 부호(%)가 뒤에 오는 정수를 지정한다.
• inherit : 부모 요소로부터 값을 상속 받는다.

자바스크립트 문법

object.style.lineHeight="2"

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
지원	지원	지원	지원	지원

inherit 값은 IE7 이하는 지원하지 않는다. IE8은 !DOCTYPE이 필요하다. IE9부터 정상 지원한다.