[CSS] 폰트(font) 관련 속성

 

 

 

1. font-family

 

- 어떤 글꼴을 사용할 것인지를 결정하는 속성 

- 속성 값으로 사용할 글꼴의 이름을 적어주면 됨(글꼴 이름에 띄어쓰기가 들어갈 경우 큰따옴표로 묶어줘야함)

#title {
	font-family: "글꼴명";
}

 

- 지정한 글꼴을 찾지 못했을 경우를 대비해서 사용할 글꼴을 순서대로 지정해 줘야 함

font-family 속성에 fallback 시스템 - 지정한 글꼴을 찾지 못했을 경우를 대비해서 사용할 글꼴을 순서대로 지정해 주는 것 - 최대한 많은 브라우저와 운영체제에서 글자가 깨지지 않고 나올수 있도록 하기 위함

#title {
	font-family: Arial, Verdana, Monaco, "Times New Roman";
}

 

- 일반적인 글꼴 분류(generic font family) 

#title {
	font-family: Arial, serif | sans-serif | monospace | cursive | fantasy;
}

serif	각 글자의 모서리에 작은 테두리를 갖고 있는 형태의 글꼴
sans-serif	모서리에 테두리가 없이 깔끔한 선을 가진 글꼴, 컴퓨터 모니터에서는 serif 보다 가독성이 좋음
monospace	모든 글자가 같은 가로 길이를 가지는 글꼴, 코딩 할 때 주로 사용
cursive	사람이 쓴 손글씨 모양의 글꼴
fantasy	장식이 들어간 형태의 글꼴

 

 

2. font-size

- 글꼴의 크기와 관련된 속성

- 값으로 px, em, rem, vw 등의 단위 사용 가능

cf) em 단위 - px(픽셀)은 고정된 값이지만 em은 사용자가 브라우저에서 글꼴의 크기를 변경할 수 있게 해 브라우저의 기본 글꼴 크기 1em은 16px과 동일함 따라서 16*em = pixels 공식 성립됨

 

#title1 {
	font-size: 16px;
}

#title2 {
	font-size: 1em;
}

#title3 {
	font-size: 10vw;
}

 

 

3. font-weight

- 글꼴의 두께와 관련된 속성

- 값으로 normal, bold를 사용하거나 100 ~ 900까지 100단위의 숫자로 된 값 사용(숫자가 클 수록 두꺼워 짐)

#title1 {
	font-weight: bold;
}

#title2 {
	font-weight: 500;
}

 

 

4. font-style

- 글꼴의 스타일을 지정하기 위한 속성

- 값으로 normal, italic, oblique 사용

normal	일반적인 글자의 형태
italic	- 글자가 기울어진 형태 - 디자이너가 별도로 기울어진 형태의 글자를 디자인 한 것
oblique	- 글자가 비스듬한 형태로 나타남 - 글자를 그냥 기울인 것