[CSS 기본] 텍스트 관련 스타일 (1)

font-family 글꼴 지정

- 시스템에 설치되어 있는 글꼴인 경우 지정한 글꼴이 적용된다.

* [] 는 옵션

font-family: {글꼴 이름}[,{글꼴 이름},{글꼴 이름}]

@font-face 웹 폰트 사용

- 사용자 시스템에 없는 글꼴이더라도 웹 문서를 통해 필요한 글꼴을 사용자 시스템에 다운로드한 후 표시하게 하기 위한 속성

[1] 구글 웹 폰트 사용

- 구글에서 제공하는 무료 웹 폰트를 import 해서 사용하는 방법

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

[2] 직접 웹 폰트 업로드

- .eot(Embedded Open Type) 이나 .woff (Web Open Font Format) 파일을 사용해 폰트를 설정할 수 있다.

@font-face {
	font-family: {글꼴 이름};
    src: url({글꼴 파일 경로}) format({파일 유형});
}

파일 확장자별 선언 순서: eot > woff > ttf

font-size 글자 크기 조절

font-size: <절대 크기>|<상대 크기>|<크기>|<백분율>

▼ [font-size 속성 값]

속성 값	설명	값
<절대 크기>	브라우저에서 지정한 글자 크기	xx-small, x-small, small, medium, large, x-large, xx-large
<상대 크기>	부모 요소의 글자 크기를 기준으로 더 크게 표시하거나 더 작게 표시	larger, smaller
<크기>	브라우저와 상관없이 글자 크기를 직접 지정
<백분율>	부모 요소의 글자 크기를 기준으로 해당하는 %를 계산해서 표시

▼ [크기 단위]

단위	설명
em	해당 글꼴의 대문자 M의 너비를 기준으로 크기를 조절 모바일 접속을 고려해 em 단위를 사용하는 것이 좋다.
ex (x-height)	해당 글꼴의 소문자 x의 높이를 기준으로 크기를 조절
px (픽셀)	모니터에 따른 상대적 크기
pt (포인트)	일반 문서에서 많이 사용하는 단위

font-wieht 글자 굵기 지정

font-widht: normal | bold | bolder | lghter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

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

font-variant: normal | small-caps

속성 값	설명
normal	기본 값
small-caps	대문자를 소문자 크기에 맞춰 작게 표시 소문자를 대문자로 표시

font-style 글자 스타일 지정

font-style: normal | italic | oblique

글꼴 속성 한꺼번에 표현하기

font: <font-style><font-variant><font-weight><font-size/line-height><font-family> | caption 
| icon | menu | message-box | small-caption | status-bar

ITDevStory