[CSS] 기본 속성 - 글꼴

CSS font 속성

1.font-family
2.font-style
3.font-variant
4.font-weight
5.font-size

 

 

CSS 글꼴 집합(font-family)

- generic family : 비슷한 모양을 가지는 글꼴 집합 ("Serif", "Monospace" 등)
- font family : 특정 글꼴 집합 ("Times", "Courier" 등)

 

 

1.font-family

- 하나의 글꼴만 / 여러 개의 글꼴을 같이 설정

- 여러 개의 글꼴 설정 시, 순서대로 읽어 들인 글꼴이 존재하는지 확인해서 표시

- 글꼴의 이름이 한 단어 이상이면 따옴표 사용

- 여러 개의 글꼴은 쉼표(,)로 구분

.serif { font-family: "Times New Roman", Times, serif; }
.sansserif { font-family: Arial, Helvetica, sans-serif; }

2.font-style

- 주로 이탤릭체를 사용하기 위함

 

- normal : 텍스트에 어떠한 스타일도 적용하지 않음
- italic : 텍스트를 이탤릭체로 나타냄
- oblique : 텍스트를 기울임. italic과 매우 유사하지만 지원하는 웹 브라우저가 거의 없음

.normal { font-style: normal; }
.italic { font-style: italic; }
.oblique { font-style: oblique; }

3.font-variant

- small-caps : 텍스트에 포함된 영문자 중 모든 소문자를 작은 대문자(small-caps) 글꼴로 변경

- 대문자는 기존 크기 그대로 출력

작은 대문자(small-caps) 글꼴 : 기존 대문자보다는 약간 작은 크기의 대문자

4.font-weight

- 텍스트의 두께 설정

- 속성값 : lighter, normal, bold, bolder, ...

- 숫자 사용 가능

.normal { font-weight: normal; }
.bold { font-weight: 600; }
.bolder { font-weight: bolder; }

5.font-size

- 텍스트의 크기 설정

- 제목을 표현할 때는 크기만 키울 게 아닌 <h1> ~ <h6> 태그 사용하기

 

1. 절대적 크기 : 명시된 크기 그대로 설정
2. 상대적 크기 : 모든 웹 브라우저에서 같은 크기로 표현

=> 텍스트를 둘러싼 HTML 요소들의 크기에 따라 같이 변화

 

 

font-size의 크기 단위

- 백분율 단위(%) : 기본 크기 100%, 상대적인 크기 설정

- 배수 단위(em) : 해당 글꼴의 기본 크기 1em, 상대적인 크기 설정

- 픽셀 단위(px) : 스크린의 픽셀 기준, 절대적인 크기 설정

body { font-size: 100%; }
#large { font-size: 2.5em; }
#small { font-size: 0.7em; }
#fixed { font-size: 20px; }

 

 

 

 

 

http://tcpschool.com/css/css_basic_fonts

코딩교육 티씨피스쿨