[CSS] font(1)

 

 

▶ font

  - 글자 관련 속성들을 지정.

  - 단축 속성. 

    - font-style, font-weight, font-size, line-height, font-family의 다섯 가지 개별 속성들의 집합.

 

 

[개별 속성]
font-style

 - 글자 기울기 지정.

 - 기본 값: normal.

font-weight

 - 글자 두께 지정(가중치).

 - 기본 값: normal.
font-size

 - 글자 크기 지정.

 - 기본 값: medium(= 16px).

 - 미리 지정된 CSS 설정이 없다면 font-size: medium;으로 설정되어 있을 것이고 이는 16px에 해당.

line-height

 - 줄 높이 지정.

 - 기본값 normal.
 - reset.css 적용 시 line-height의 기본 값은 약 1.
font-family

 - 글꼴(서체) 지정.

 - 운영체제(브라우저)에 따라 달라지는 특성을 가짐.

[사용 방법]

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

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

  - 위와 형식으로 사용.
  - Arial: 내가 설정한 글꼴, sans-serif: 내가 설정한 글꼴(Arial)이 없을 때 나올 기본적인 폰트 계열.
  - 중간에 슬래시(/)로 구분됨에 유의.

    - 크기, 줄높이의 경우 단위가 들어갈 수 있음.

    - 일반적으로 단축 속성의 경우 속성 값의 입력 순서가 뒤바뀌어도 동작하는 경우가 간혹 있으나, 크기와 줄 높이는 순서를 명확히 하지 않으면 무엇이 크기이고 무엇이 줄 높이인지 구별이 어려움.
    - 크기와 줄높이는 순서를 명확히 하지 않으면 무엇이 크기고 뭐가 줄높이인지 구별 어려움.
    - 이를 구별하기 위해 /로 구분하는 것.
    - 일반적인 개별 속성들은 띄어쓰기로 구분하지만 크기와 줄높이는 /로 구분.

 

 

 

[사용 예시]

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

  - 단축 속성을 사용 시 font-size(크기)와 font-family(글꼴)를 필수로 입력해야 함.