HTML5+CSS3 - 글꼴 관련 스타일

font-family 속성 - 글꼴 지정하기

웹 문서에서 사용할 글꼴을 지정한다.

font-family: "글꼴 이름"

시스템에 해당 글꼴이 설치되어 있지 않을 경우, 브라우저의 기본 값으로 표현된다.

글꼴이 없을 경우를 대비해 세번째까지 지정할 수 있다.

font-family: "글꼴 이름", "글꼴이름", "글꼴이름"

상속이 가능하므로, body 태그에 사용하면 모든 내용에 적용된다.

@font-face 속성 - 웹 폰트 사용하기

웹 폰트는 웹 문서를 작성할 때 웹 문서 안에 글꼴 정보도 함께 저장했다가 사용자가 웹 문서에 접속하면 글꼴을 사용자 시스템으로 다운로드 하게 되는 방식이다.

컴퓨터에서 사용하는 글꼴은 트루타입(.ttf)인데, 파일크기가 크기 때문에 모바일용으로 적합하지 않다.

그래서 많이 사용하는 글꼴타입은 .eot, .woff 파일이다. 변환 사이트가 존재한다.

@font-face{

  font-family: 글꼴이름;

  src:url(글꼴파일경로) format(파일유형);

}

파일유형 이름은 아래와 같다.

글꼴 종류	글꼴 파일 유형	글꼴 파일 확장자
Web Open Font Format	woff	.woff
TrueType	truetype	.ttf
OpenType	opentype	.ttf  .otf
Embedded Open Type	embeddedopentype	.eot
SVG 폰트	svg	.svg  .svgz

font-size 속성 - 글자 크기 조절하기

font-size:속성값;

사용할 수 있는 값은 "상대크기", "크기값", "백분율"이며, 기본값은 상대크기 medium이다. 상속이 가능하다.

상대크기: 약속된 키워드를 사용하여 크기를 지정한다.

xx-small < x-small < small < medium < large < x-large < xx-large

larger, smaller를 사용하면 부모요소의 크기에서 한단계 크거나, 작은 사이즈를 사용한다.

크기값: 직접 값을 지정하며, 음수는 사용할 수 없다. 사용 단위는 아래와 같다.

  em: 해당 글꼴의 대문자 M의 너비를 기준으로 한다.

  ex: x-height. 해당 글꼴의 소문자 x의 높이를 기준으로 한다.

  px: 픽셀. 모니터에 따라 상대적인 크기가 된다.

  pt: 포인트. 보통 문서에서 많이 사용하는 단위.

12pt = 16px = 1em = 100%

px는 고정 사이즈이지만, em은 글꼴이나 화면에 따라 크기가 변한다. 모바일을 염두해두고 em을 사용하자.

백분율: 부모요소 크기를 기준으로 계산된다. 부모요소는 크기값이여야 한다.

font-style 속성 - 글자 이탤릭체로 표시하기

font-style:속성값;

속성값

  - normal: 일반적인 형태

  - italic: 이탤릭체로 표시. 기울어진 글꼴이 처음부터 디자인되어 있다.

  - oblique: 이탤릭체로 표시. 원래 글꼴을 기울어지게 표시한다.

font-variant 속성 - 작은 대문자로 표시하기

영문 소문자를 작은 대문자로 표시한다.

font-variant:속성값;

속성값

  - normal: 일반적인 형태

  - small-caps: 작은 대문자로 표시합니다.

font-weight 속성 - 글자 굵기 지정하기

font-weight:속성값;

속성값

  - normal: 일반적인 형태

  - bold: 진하게 표시

  - lighter: 원래 굵기보다 연하게 표시

  - bolder: 원래 굵기보다 진하게 표시

  - 100~900 수치: 400은 보통. 700은 진하게를 기준으로 지정