font

 

-font

:모든 폰트 속성들을 하나로 정의하는 축약 속성이다. 그 안에 포함할 수 있는 속성들에는 font-style, font-variant, font-weight, font-size/line-height, font-family 가 있으며 그 중 font-size 와 font-family 는 필수 값이다. 만약 두 값 중 하나라도 작성하지 않는다면 기본값으로 설정된다. line-height 속성은 선(텍스트 줄)들 사이의 간격을 정의한다.

 

{ font:style variant weight size family; }

font-size : 폰트의 크기를 지정

font-variant : 폰트의 변형 형태를 지정

font-weight : 폰트의 굵기를 지정

font-size/line-height : 폰트의 크기를 지정 / 텍스트 줄 사이의 간격을 지정

font-family :

	폰트의 종류를 지정

caption :

icon :

menu :

message-box :

small-caption :

status-bar :

inherit : 지정 요소의 폰트 속성을 부모(상위) 요소로부터 상속받음

 

사용 예)

div { font:italic small-caption bold 12px arial,sans-serif; }

 

 

-font-family

:해당 요소에 사용되는 폰트의 종류를 정의한다. 일반적으로 하나가 아닌 여러 개의 폰트 이름을 지정하는 데 우선순위 대로 브라우저가 지원하는 폰트를 골라 렌더링을 해준다. 만약 첫 번째 폰트 종류를 해당 브라우저가 지원하지 않는다면 자동적으로 두 번째 폰트를 렌더링 하는 것이다.

font-family 이름의 타입에는 다음 두 가지가 있다.
- font-family 의 이름 : “times”, “courier”, “arial” 등
- generic-family(기본 폰트) 의 이름 : “serif”, “sans-serif”, “cursive”, “fantasy”, “monospace” 등

먼저 원하는 font-family 이름을 적고, 뒷쪽에 generic-family 이름을 나열하면, 원하는 폰트가 브라우저에서 지원하지 않을 경우 generic-family 중에서 유사한 것을 브라우저가 고를 것이다. 각 폰트 이름은 콤마(,)로 구분하며 만약 폰트 이름에 띄어쓰기가 되어 있다면 그것은 반드시 따옴표로 묶어 주어야 한다.

 

{ font-family:"name", "name", "name"...; }

font-family, generic-family : 폰트 종류의 우선 순위를 지정

inherit : 지정 요소의 폰트 속성을 부모(상위) 요소로부터 상속받음

 

사용 예)

div { font-family:"Nanum-Gothic", "arial", "sans-serif"; }

 

 

-font-size

:폰트의 크기를 지정한다.

 

{ font-size:value; }

xx-small : xx-small 사이즈로 지정

x-small : x-small 사이즈로 지정

small : small 사이즈로 지정

medium : medium(16px-브라우저 폰트 기본 사이즈) 사이즈로 지정

large : large 사이즈로 지정

x-large : x-large 사이즈로 지정

xx-large : xx-large 사이즈로 지정

smaller : smaller 사이즈로 지정

larger : larger 사이즈로 지정

length : px, cm 등의 단위로 직접 크기 지정

% : 상위(부모) 요소 폰트 크기에서 % 로 계산하여 크기 지정

inherit : 지정 요소의 폰트 크기를 부모(상위) 요소로부터 상속받음

 

사용 예)

div { font-size:12px; }
div { font-size:100%; }
div { font-size:XX-large; }

 

 

-font-style

:폰트의 스타일(모양)을 지정한다.

 

{ font-style:value; }

normal : 기본값(default), 일반 폰트로 지정

italic : 이태릭체로 지정

oblique : 기울임체로 지정

inherit : 지정 요소의 폰트 스타일을 부모(상위) 요소로부터 상속받음

 

사용 예)

div { font-style:italic; }

 

 

-font-variant

:문자 변환의 의미로 small-caps 값을 주면 모든 소문자를 대문자로 변환한다. 그러나, 변환된 대문자는 실제 대문자 사이즈 보다 더 작은 사이즈로 나타나며 대소문자 변환이기 때문에 한글에는 적용이 되지 않는다.

 

{ font-variant:small-caps; }

normal : 기본값(default), 기본 스타일로 지정

small-caps : 소문자를 대문자로 변환

inherit : 지정 요소의 폰트 변형을 부모(상위) 요소로부터 상속받음

 

사용 예)

div { font-variant:small-caps; }

 

 

-font-weight

:폰트를 굵게 또는 얇게 나타내는 것을 지정한다.

 

{ font-weight:bold; }

normal : 기본값(default), 기본 굵기로 지정

bold : 두껍게 지정

bolder : 두껍게 지정

lighter : 얇게 지정

100, 200, 300, 400, 500, 600, 700, 800, 900 : 오름 순으로 점점 굵게 지정

inherit : 지정 요소의 폰트 굵기를 부모(상위) 요소로부터 상속받음

 

사용 예)

div { font-weight:bold; }

 

 

출처 : http://htmlcss.kr/css/font/