폰트패밀리
Serif 폰트
폭이 가변적이다. (폰트의 모든 문자가 너비가 다르게 되어있다)
serif는 소문자l의 위아래나 대문자 A하단의 작은 돌기처럼 각 문자의 끝에있는 장식을 말한다.
예) Times, Georgia, New Century Schoolbook 등
Sans-serif 폰트
폭이 가변적이다.
하지만 serif가 없다.
예) Helvetica, Geneva, Verdana, Arial, Univers 등
고정폭 폰트
고정폭 폰트는 폭이 일정하다.
보통 프린터의 출력문이나 오래된 컴퓨터화면, 타자기의 효과를 나타낼때 사용된다.
고정폭 폰트는 모든 문자가 같은 너비를 가지고 있다.
이 폰트는 serif가 있을 수도 있고 없을 수도 있다.
특정 폰트가 같은 너비를 가지게 되면 serif의 유무와 상관없이 고정폭 폰트로 분류된다.
예) Courier, Courier New, Andale Mono 등
Cursive 폰트
손으로 직접 쓴 효과를 주기 위해 사용된다.
대부분 곡선으로 이루어져 있고 serif보다 과장된 장식을 갖고있다.
예) Zapf Chancery, Author, Comic Sans 등
Fantasy 폰트
특정한 기준으로 정의내리기 어렵다.
예) Western, Woodblock, Klingon 등
예) h1 { font-family : serif;}
h1태그의 글씨폰트를 serif 폰트패밀리에 해당하는 폰트들중 하나로 표시한다.
폰트패밀리 지정하기
예) h1 { font-family : Georgia;}
h1태그의 글씨폰트를 Georgia폰트로 바꾼다.
하지만 사용자 에이전트가 'Georgia'라는 폰트를 찾을수 없다면, 기본 폰트로 표현된다.
하지만 폰트 패밀리와 결합해서 사용한다면 정확하진 않지만 비슷하게는 표시할수있다.
예) h1 { font-family : Georgia, serif;}
h1태그의 글씨폰트를 Georgia폰트로 바꾸고, 만약 Georgia폰트가 존재하지 않는다면 다른 serif폰트를 이용해 표시한다.
왼쪽부터 차례대로 우선순위에 따라 적용된다.
폰트 패밀리 선언에서 폰트의 이름에 공백이 들어가있거나, #이나 $등의 특수기호가 들어가 있는경우는 인용부호 ' 로 묶어줘야 한다.
예) h1 { font-family : 'New Century Schoolbook', 'Karrank%';}
만약 인용부호로 붂어주지 않는다면, 사용자 에이전트가 나머지 부분은 처리하지만 특정 폰트부분은 완전히 무시하게 될 가능성이 있다.
만약 폰트패밀리의 이름과 동일한 특정한 폰트를 사용하고자할때도 인용부호로 묶어줘야한다.
예) h1 { font-family : 'serif', serif;}
h1태그의 글씨폰트를 'serif'라는 이름의 특정한 폰트로 바꾸고, 만약 'serif'라는 이름의 특정한 폰트가 없다면 serif패밀리의 다른 폰트를 이용해서 표시한다.
폰트 웨이트
절대크기 : normal, bold
상대크기 : bolder, lighter
예) h1 { font-weight : bold;}
h1태그의 글씨를 Bold체로 바꾼다.
폰트 사이즈
절대크기 : xx-small, x-small, small, medium, large, x-large, xx-large
상대크기 : larger, small
폰트 스타일
italic, oblique, normal, inherit
oblique는 폰트자체를 기울이며, italic은 기울임꼴의 폰트를 사용한다.
italic이 없을경우 oblique를 대체사용가능하지만 oblique가 없을경우 italic을사용할수는 없다.
폰트변형
font-variant : small-caps;
소형 대문자를 사용한다.
이모든것을 <font>에 넣어서 사용할수있다.
font에는 font-style, font-variant, font-weight, font-size, font-family 등등이 들어가며
앞의 세가지는 순서가 바뀌거나 생략해도 돼지만 뒤의 두가지는 생략도 불가능하며 순서도 뒤바뀌면 안된다.
시스템 폰트의 사용
운영체제와 잘어울리는 폰트
caption : 버튼처럼 글자가 있는 컨트롤에 사용되는 폰트 스타일
icon : 아이콘에 이름을 지정할 때 사용되는 폰트 스타일
ment : 드롭다운 메뉴나 메뉴 리스트에 사용되는 폰트스타일
message-box : 대화 상자에 사용되는 폰트 스타일
small-caption : 작은 컨트롤에 이름을 지정할 때 사용되는 폰트 스타일
status-bar : 윈도우의 상태 바에 사용되는 폰트 스타일
폰트 다운로드
@font-face {font-family : "폰트명";
src : url(경로명);}
