font 관련태그 css

1. font

 

지정한 요소의 폰트설정을 합니다.

 

font-style : 폰트의 스타일을 정의합니다.
font-variant : 폰트의 소문자를 작은대문자로 설정합니다.
font-weight : 폰트의 두께를 정의합니다.
font-size : 폰트의 사이즈를 정의합니다.
line-height :  글자간 높이를 정의합니다.
font-family : 폰트를 지정합니다.
caption : 폰트를 컨트롤 자막 스타일로 정의합니다.
icon : 폰트를 아이콘 라벨 스타일로 정의합니다.
menu : 폰트를 드롭다운 메뉴 스타일로 정의합니다.
message-box : 폰트를 다이얼로그 박스 스타일로 정의합니다.
small-caption : 폰트를 작은 자막 스타일로 정의합니다.
status-bar : 폰트를 스테이터스바 스타일로 정의합니다.
inherit : 어미요소의 font 속성을 상속받습니다.
※ 일부 속성들은 브라우저마다 표현의 차이가 있습니다.

 

기본값 : 없음
상속 : 상속함.
버전 : CSS1
자바스크립트 문법 : object.style.font="italic small-caps bold 12px arial,sans-serif"

CSS 코드

 

p {
  font:italic small-caps bold 24px arial,sans-seri;
}

 

HTML 코드

 

<p>테스트</p>

출력결과

 

테스트

 

 

2. font-family

 

지정한 요소의 글씨체를 정의합니다.

 

family-name : 폰트 종류 및 그룹을 지정합니다.
generic-family : 폰트 종류 및 그룹을 지정합니다.
inherit : 어미 요소의 font-family를 상속 받습니다.

 

기본값 : 없음
상속 : 상속함
버전 : CSS1
자바스크립트 문법 : object.style.fontFamily="arial,sans-serif"

CSS 코드

 

p {
  font-family:Gungsuh, Dotum, Gulim, arial;
}

 

HTML 코드

 

<p>테스트</p>

출력결과

 

테스트

 

 

3. font-size

 

지정한 요소의 폰트 사이즈를 정의합니다.

 

xx-small : 폰트의 사이즈를 xx-small로 설정합니다.
x-small : 폰트의 사이즈를 x-small로 설정합니다.
small : 폰트의 사이즈를 small로 설정합니다.
medium : 폰트의 사이즈를 medium로 설정합니다.
large : 폰트의 사이즈를 large로 설정합니다.
x-large : 폰트의 사이즈를 x-large로 설정합니다.
xx-large : 폰트의 사이즈를 xx-large로 설정합니다.
smaller : 폰트의 사이즈를 smaller로 설정합니다.
larger : 폰트의 사이즈를 larger로 설정합니다.
length : 폰트의 사이즈를 지정한 값으로 설정합니다. (px, em, cm 등)
% : 폰트의 사이즈를 %값으로 설정합니다.
inherit : 어미 요소의 font-size 속성을 상속받습니다.

 

기본값 : medium
상속 : 상속함
버전 : CSS1
자바스크립트 문법 : object.style.fontSize="larger"

 

CSS 코드

 

p.test1 {
  font-size:xx-small;
}
p.test2 {
  font-size:24pt;
}

 

HTML 코드

 

<p class="test1">테스트</p>
<p class="test2">테스트</p>

출력결과

 

테스트

테스트

 

4. font-style

 

지정한 요소의 폰트 스타일을 정의합니다.

 

normal : 폰트를 기본 설정합니다.
italic : 폰트에 italic효과를 줍니다.
oblique : 폰트에 oblique효과를 줍니다.
inherit : 어미 요소의 font-style을 상속받습니다.

 

기본값 : normal
상속 : 상속함
버전 : CSS1
자바스크립트 문법 : object.style.fontStyle="italic"

 

CSS 코드

 

p.test1 {
  font-style:italic;
}
p.test2 {
  font-style:oblique;
}

 

HTML 코드

 

<p class="test1">테스트</p>
<p class="test2">테스트</p>

출력결과

 

테스트

테스트

 

 

5. font-variant

 

지정한 요소에 폰트의 소문자를 작은 대문자로 변환합니다.

 

normal : 폰트를 기본 설정합니다.
small-caps : 폰트의 소문자를 작은 대문자로 변환합니다.
inherit : 어미 요소의 font-variant를 상속받습니다.

 

기본값 : normal
상속 : 상속함
버전 : CSS1
자바스크립트 문법 : object.style.fontVariant="small-caps"

 

CSS 코드

 

p {
  font-variant:small-caps;
}

 

HTML 코드

 

<p>SHOW ME THE MONEY</p>
<p>Show Me The Money</p>

출력결과

 

 

 

 

 

 

 

 

 

6. font-weight

 

지정한 요소의 폰트 두께를 설정합니다.

 

normal : 폰트 두께를 기본으로 설정합니다.
bold : 폰트 두께를 thick 설정합니다.
bolder : 폰트 두께를 thicker 설정합니다.
lighter : 폰트 두께를 lighter 설정합니다.
100 : 폰트의 두께를 수치에 맞춰 설정합니다.
200 : 폰트의 두께를 수치에 맞춰 설정합니다.
300 : 폰트의 두께를 수치에 맞춰 설정합니다.
400 : 폰트의 두께를 수치에 맞춰 설정합니다.
500 : 폰트의 두께를 수치에 맞춰 설정합니다.
600 : 폰트의 두께를 수치에 맞춰 설정합니다.
700 : 폰트의 두께를 수치에 맞춰 설정합니다.
800 : 폰트의 두께를 수치에 맞춰 설정합니다.
900 : 폰트의 두께를 수치에 맞춰 설정합니다.
inherit : 어미 요소의 font-weight를 상속받습니다.

 

기본값 : normal
상속 : 상속합
버전 : CSS1
자바스크립트 문법 : object.style.fontWeight="900"

 

CSS 코드

 

p { font-size:24pt; }
p.test1 { font-weight:bold; }
p.test1 { font-weight:bolder; }
p.test1 { font-weight:lighter; }
p.test1 { font-weight:400; }
p.test1 { font-weight:800; }

 

HTML 코드

 

<p class="test1">테스트</p>
<p class="test2">테스트</p>
<p class="test3">테스트</p>
<p class="test4">테스트</p>
<p class="test5">테스트</p>

출력결과

 

테스트

테스트

테스트

테스트

테스트

 

출처: http://coterie-textcube.blogspot.kr/2009/12/css-styling-fonts.html