font, font-style

font

글자 관련 속성들을 지정

값	의미	기본값
font-style	글자 기울기 지정	normal
font-weight	글자 두께 지정	normal
font-size	글자 크기 지정	medium(16px)
line-height	줄 높이(줄 간격) 지정	normal(Reset.css 적용시 1)
font-family	글꼴(서체) 지정	운영체제(브라우저)에 따라 달라짐

font : 기울기 두께 크기 / 줄높이 글꼴;

기울기, 두께, 글꼴은 순서가 바뀌어도 제대로 동작한다. 하지만 크기 / 줄높이는 순서가 바뀌면 안된다.

 

.box {
	font : italic bold 20px / 1.5 "Arial", sans-serif;
 }

.box{
  font: 30px / 1.5; /* ERROR */
  font: bold; /* ERROR */
  font: bold sans-serif;  /* ERROR */
  font: 30px / 1.5 sans-serif;
  font: bold 30px sans-serif;
  font: italic 30px / 1.5 "Arial", sans-serif;
}

단축 속성을 사용하려면 font-size와 font-family를 필수로 입력해야 한다.

 

 

font-style

글자 스타일(기울기)을 지정

값	의미	기본값
normal	스타일 없음	normal
italic	이텔릭체(활자) -->주로 이걸 이용
oblique	기울어진 글자

<p>저의 이름은 MOMO입니다.</p>

p{
  font-size: 40px;
  font-style: italic;
}