font 속성

font 속성은 다음과 같은 CSS 속성들을 사용할 수 있는 단축 속성입니다: font-size, font-style, font-weight, line-height, font-family, font-variant.

구문

css선택자 {
  font: [font-style|font-variant|font-weight] font-size [/line-height] font-family;
}

필수 속성은 font-size와 font-family이며, 나머지 속성은 순서를 유지하면서 생략할 수 있습니다.

font-style, font-variant, font-weight 속성은 서로에 대해 어떤 순서로든 배치할 수 있습니다.

line-height 속성은 font-size 속성 뒤에 슬래시를 사용하여 작성됩니다.

예제

15px 크기의 기울임꼴 텍스트를 Arial 글꼴로, 줄 간격을 30px로 설정해 봅시다:

html<p>
  some long text
</p>

cssp {
  font: italic 15px/30px Arial;
  text-align: justify;
}

Результат:

예제

다른 예제:

html<p>
  some long text
</p>

cssp {
  font: bold 16px/20px "Times New Roman", Georgia, serif;
  text-align: justify;
}

Результат:

예제

다른 속성을 생략하고 글꼴 크기와 글꼴 패밀리만 지정해 봅시다:

html<p>
  some long text
</p>

cssp {
  font: 18px Arial;
  text-align: justify;
}

Результат:

예제

글꼴 패밀리도 반드시 지정해야 하므로, 글꼴 크기만 지정하면 적용되지 않습니다:

html<p>
  some long text
</p>

cssp {
  font: 30px;
  text-align: justify;
}

Результат: