[CSS] CSS 글꼴 속성

CSS 글꼴 속성

웹페이지의 텍스트에 대해서 글꼴, 글자 크기, 굵기 등과 같은 스타일을 지정하기 위해서 font(글꼴)속성이 있다.

font-family 속성

글자체(폰트)를 지정.
시스템에 해당 글씨체를 지원하지 않을 경우를 대비해 여러 개의 글자체를 동시에 지정하면,
쉼표로 구분한 폰트를 나열 된 순서대로 폰트의 지원 여부에 따라 앞에 오는 폰트를 사용한다.
font-family : <일반폰트명> | <폰트패밀리> ;

• <일반폰트명> => 'arial', '궁서체'와 같은 구체적인 폰트의 이름을 지정. 폰트명 사이에 공백이 있는 경우에는 따옴표('',"")를 사용.
• <폰트패밀리> => 'serif'(명조 계열), 'sans-serif'(고딕 계열), 'cursive'(필기체), 'fantasy'(장식이 된 글꼴), 'monospace'(일정한 공간으로 된 타자기 서체)

font-size 속성

글자 크기를 지정.
font-size : <절대크기 키워드> | <상대크기 키워드> | <절대크기 단위> | <상대크기 단위>;

• <절대크기 키워드> => xx-small, x-small, small, medium, large, x-large, xx-large
• <상대크기 키워드> => smaller, larger (부모 요소의 크기 대비 한 단계 작게/크게 지정)
• <절대크기 단위> => cm, mm, in(1인치=2.54cm), pt(72포인트=1인치), pc(1파이카=12포인트), px(픽셀)
• <상대크기 단위> => em(부모 요소의 글꼴 크기(1em)에 대비 크기), ex(적용 글꼴의 소문자 x높이(1ex) 대비 크기), %(기본 설정 크기의 백분율)

font-style 속성

글자 모양(스타일) 설정.
font-style : normal | italic | oblique ;

• normal => 기본
• italic => 이탤릭체(기울어진 형태)의 텍스트로 설정
• oblique => 기울어진 모양으로 표현(외관상으로 italic 속성과 별 차이 없음)

font-weight 속성

글자 굵기 설정.
font-weight : normal | bold | bolder | lighter | 100 | ... | 900 ;

• normal => 기본 굵기(400)
• bold => 기본 굵기보다 굵게 지정(700)
• bolder, lighter => 현재 상위요소 굵기보다 한 단계 굵게/가늘게
• 100, 200, ..., 900 => 굵기를 9단계로 구분해서 지정

font-variant 속성

영어 소문자를 작은 크기의 대문자 변경.
font-variant : normal | small-caps ;

• normal => 기본 형태
• small-caps => 영어 알파벳(alphabet)을 작은 크기의 대문자로 표시

font 속성

글꼴 관련된 속성을 아래같은 순서대로 한꺼번에 지정.
사용방법 : 선택자 { font : [font-style | font-variant | font-weight] font-size [/ line-height] font-family }

• 순서 변경 가능 속성 => [font-style | font-variant | font-weight]
• 필수 지정 속성 => font-size 값, font-family 값
• line-height => 줄 간격 지정. 사용하는 경우 dont-size 값 뒤에 '/'를 붙인다.
• 글자굵기(700) 글자스타일(이탤릭체) variant(small-caps) 글자크기(15pt)/줄간격(10pt) 글자체(Georgia, sans-serif)
  예시 : font 적용 결과