CSS의 font 속성은 여러 개의 글꼴 관련 하위 속성을 하나로 묶어 간결하게 지정할 수 있는 축약형(shorthand) 속성입니다. 이 속성 하나만으로 글꼴 계열(font-family), 크기(font-size), 스타일(font-style), 굵기(font-weight), 변형(font-variant) 등을 동시에 설정할 수 있어 코드를 더 깔끔하게 유지할 수 있습니다.
font 속성의 작성 순서
font 축약 속성을 사용할 때는 값의 나열 순서가 중요합니다. 일반적으로 다음과 같은 순서로 작성합니다.
- font-style – italic(이탤릭), oblique 등
- font-variant – small-caps 등
- font-weight – bold, normal, 100~900 등
- font-size / line-height – 예: 13px 또는 13px/1.5
- font-family – georgia, serif 등
이 중 font-size와 font-family는 반드시 포함해야 하는 필수 값입니다. 생략된 속성은 기본값으로 초기화되므로 주의해야 합니다.
예제
다음 코드를 실행하면 font 축약 속성을 사용하여 텍스트에 여러 글꼴 속성을 한 번에 적용하는 방법을 확인할 수 있습니다.
<html>
<head>
</head>
<body>
<p style = "font:italic small-caps bold 13px georgia;">
텍스트에 모든 글꼴 속성을 한 번에 적용합니다.
</p>
</body>
</html>
실행 결과
위 예제에서 텍스트는 이탤릭체(italic)로 기울어지고, 스몰캡스(small-caps) 변형이 적용되며, 굵은 글씨(bold)와 13px 크기, georgia 글꼴로 화면에 표시됩니다. 이처럼 font 축약 속성을 활용하면 개별 속성을 일일이 선언하지 않고도 원하는 타이포그래피 스타일을 빠르고 효율적으로 적용할 수 있습니다.