CSS font 속성들과 속기형 작성법

Last Updated: 2020-03-25

CSS에서 font의 특성을 지정하는 속성들과 이를 빠르게 작성할 수 있는 속기형 작성법에 대해 정리하려 한다.

CSS에서 글자 스타일을 지정하는 속성들

  • 글꼴: font-family
  • 크기: font-size
  • 행간: line-height
  • 기울기: font-style
  • 두께: font-weight
  • 음절 앞 글자 대문자: font-variant(영문 글꼴에만 적용)

예시

font-family: "Times New Roman";
font-size: 10px;
line-height: 1.5;
font-style: italic;
font-weight: bold;
font-variant: small-caps;

예시 처럼 각 속성들을 따로 지정할 수도 있지만, 속기형으로 빠르게 지정할 수 도 있다.

font 속기형 작성법

font 속기형 작성법에는 필수 지정 요소들이 존재하며, 옵션 요소들의 경우 작성하는 방법이 존재한다.

  • 필수요소: font-size 와 font-family는 필수로 지정해야한다.
font: 10px "Times New Roman";
  • 옵션요소: line-height를 지정할 때는 font-size뒤에 슬래시(/)를 붙이고 그 뒷부분에 작성한다. 
font: 10px/1.5 "Times New Roman";
  • 옵션요소: font-weight, font-style, font-variant등은 font-size 앞부분에 작성한다. 
font: bold italic small-caps 10px/1.5 "Times New Roman";