목차

CSS Font Shorthand

  • description : CSS Font Property
  • author : 오션
  • email : shlim@repia.com
  • lastupdate : 2021-03-08



Source of the article



CSS Font Property

코드를 줄이기 위해, 하나의 속성에서 모든 개별 폰트 속성을 지정하는 것도 가능합니다.

font속성은 하기의 속성들에 대한 shorthand 속성입니다.

Note:
font-size와 font-family값이 필요합니다. 다른 값 중 하나가 없는 경우, 기본 값이 사용됩니다.

예제

하나의 선언에서 여러 개의 폰트 속성들을 설정하기 위해 font속성을 사용합니다.

<!DOCTYPE html>
<html>
<head>
<style>
p.a {
  font: 20px Arial, sans-serif;
}
 
p.b {
  font: italic bold 12px/30px Georgia, serif;
}
</style>
</head>
<body>
 
<h1>The font Property</h1>
 
<p class="a">This is a paragraph. The font size is set to 20 pixels, and the font family is Arial.</p>
 
<p class="b">This is a paragraph. The font is set to italic and bold, the font size is set to 12 pixels, the line height is set to 30 pixels, and the font family is Georgia.</p>
 
</body>
</html>



All CSS Font Properties

Property Description
font 하나의 선언에서 모든 폰트 속성들을 설정합니다.
font-family 텍스트를 위한 폰트 집합을 지정합니다.
font-size 텍스트의 폰트 크기를 지정합니다.
font-style 텍스트의 폰트 스타일을 지정합니다
font-variant 텍스트가 small-caps 폰트로 표시 여부를 지정합니다.
font-weight 한 폰트의 굵기를 지정합니다.
, , ,