CSS 폰트 (font) 정하기
먼저 한번에 지정할수 있는 font 말고 font-size등 간단정리하고 전체를 정의하는 font를 알아보자
폰트 크기 설정
폰트크기는 여기서 참조하자 바로테스트확인할수 있다.
http://www.w3schools.com/cssref/playit.asp?filename=playcss_font-size&preval=xx-small
예제는 다음과 같다
h1{ font-size: 100%;}
h2{ font-size: larger;}
h3{ font-size: small;}
h4{ font-size: 1.9em;}
p{ font-size: 9pt;}
다음은 폰트크기를 요약 한것
상댓값
% : 부모 엘리먼트와 비교한다
em : 현재 폰트 크기에 비교(1.9는 190%)
px : 모니터 해상도에 비교
larger, smaller : 현재잣보다 한단계 올리거나내린다 예로 현재값이 medium로 되어있다면 large로 된다
절대댓값 : pt,pc,mm, cm, in (72pt = 1inch ,1pc =12pt)
html페이지를 참조하는 키워드 이는 html에서 <font size=x>으로 정의될수 있다 x값과 키워드비교는다음표를참고하자 w3c 참조
http://www.w3.org/TR/CSS2/fonts.html#font-styling
| HTML | Keyword | Example Sizes |
|---|---|---|
| Not Applicable | xx-small | 9px |
| size=1, size=-2 | x-small | 10px |
| size=2, size=-1, small | small | 13px |
| size=3 | medium | 16px |
| size=4, size=+1, big | large | 19px |
| size=5, size=+2 | x-large | 24px |
| size=6, size=+3 | xx-large | 32px |
| size=7, size=+4 | Not Applicable | 48px |
폰트 크기를 설정하기전 집고 넘어갈 것이 있다. 일단 100%로 하던 1em으로 하던간에 크기는 브라우저의 디폴트 값에 근거한다는 점을 유의해야 한다.이말은 무엇이냐하면 우리가 웹표준을 다룰때 가장 짜증나는 IE6를 비롯하여 브라우저별로 크기가 다르게 나온다는 말이다.
이에 대한해결은 Owen Briggs가 내놓은것으로 가능한 body에 상대크기를 잡아놓고 내부에 절대폰트 상대폰트크기를 사용하는 것이다. 예제처럼하면 브라우저뿐만아니라 매체에 따라서도 적절한크기가 적용된다.
/* body에 %사이즈 결정 */
body { font-size: 76%; }
/* 개별 재설정*/
p { font-size: 1em; }
h1 { font-size: 2em; }
h2 { font-size: 1.8em; }폰트 스타일 설정
이랙릭이나 빗김체나 비슷하다. 정확한 차이는 이탤릭체는 말그래로 폰트의 이탤릭버전으로 하게한다. 빗김체는 글을 기울일 뿐이다. 딸서 이탤릭체가 없는경우는 빗김체를 사용하겠지만 거의 그런 경우도 없고, 또 브라우저들이 이 둘을 잘 구분하지 않는다.
h1{ font-style: italic;}
h2{ font-style: normal;}
p{ font-style: oblique; }
폰트 굵기 설정
h1{ font-weight: bold;}
h2{ font-weight: nomal;}
h3{ font-weight: lighter;}
h4{ font-weight: bolder;}
p{ font-weight: 450; }예제에서 숫자는 900이 최고다 100~900으로 설정가능하다.
스몰 캡(small-cap) 설정
h1{ font-variant:small-caps; }
스몰캡은 모든문자가 대문자가 되고 첫번째 글자가 다른문자에 비해 조금커진다. 제목이나 부제목 강조에 사용하면 효과적이다.
한번에 설정
귀찮을때 한번에 하기. 순서는 다음과같다
font-style, font-variant, font-weight, font-size/line-height, font-family
여기서 폰트사이즈뒤에 슬러쉬하고 나오는 것은 행간격이다. 문자기준의 %라고 생각하면된다 (.9=90%)
p{ font:italic bold small-caps .7em/.9 Georgia, "Times New Roman", Times, serif ; }시스템 폰트..
p{ font: caption;}caption | icon | menu | message-box | small-caption | status-bar
위의것이 시스템 폰트라고 지정된 것들이있다.
순서대로 버튼,아이콘,메뉴,태화상자,컨트롤라벨,위도우 상단표시줄에 적절하게 사용으로 지정되어 있지만..잘 사용되는걸 못봤다. 그냥 이런게 있다고만 알아두자.
CSS3 폰트에 자세한건 여기 http://www.w3.org/TR/css3-fonts/
댓글