글자(Text) 관련 스타일(2)

글자(Text) 관련 스타일(1) 포스팅에서 font-family에 대해 알아보았다. 이번에는 font-style과 font-weight 에 대해 알아보자.

 

 

 font-style

---

font-style로 가능한 값은 normal, italic, oblique 등이 있다. normal은 말 그대로 기본 값이며, 기본 글자체이다. italic 은 이텔릭체가 디자인되어 있는 기울인 스타일이고, oblique 은 단지 글자를 기울인 스타일이다.

@import url('https://fonts.googleapis.com/css?family=Nanum+Pen+Script&display=swap');

h1, p {
	font-family: 'Nanum Pen Script', cursive;
}
h1{
	font-style: italic;
}

 

 

font-weight

---

font-weight 는 폰트 굵기를 지정할 때 사용한다. bold 혹은 100 단위의 숫자 값 등을 사용할 수 있다. 숫자 값은 100 부터 900 까지 가능하다. 보통 normal 폰트는 400, bold 폰트는 700 의 값을 가진다. 

/* 아래의 두 결과는 동일 */
font-weight: 400;
font-weight: normal;

/* 아래의 두 결과는 동일 */
font-weight: 700;
font-weight: bold;

---

@import url('https://fonts.googleapis.com/css?family=Nanum+Pen+Script&display=swap');

h1, p {
	font-family: 'Nanum Pen Script', cursive;
	
}
h1 {
	font-style: italic;
}
p {
	font-weight: bold;
}

font 프로퍼트를 사용하면 모든 과정을 한번에 설정할 수 있다. 

font: font-style font-weight size font-family;

여기서 font-style, font-weight, size, font-family를 순서대로 띄어쓰기로 구분하여 작성하면 된다. 순서가 중요하다!

font-style 과 font-weight 는 생략해도 된다.

/* ✅ font: font-style font-weight size font-family */
font: italic bold 24px 'Nanum Pen Script', cursive;

/* ✅ font: size font-family */
font: 24px 'Nanum Pen Script', cursive;