CSS의 font 속성은 여러 글꼴 관련 속성을 하나의 선언으로 간결하게 지정할 수 있는 약식(shorthand) 속성입니다. 이 속성 하나만 사용하면 font-family(글꼴 종류), font-size(글꼴 크기), font-style(글꼴 스타일) 등 다양한 글꼴 속성을 동시에 설정할 수 있어 코드를 더 깔끔하게 유지할 수 있습니다.
font 속성의 작성 순서
약식 속성은 값의 순서가 중요하며, 일반적으로 다음과 같은 순서로 작성합니다.
- font-style — italic(이탤릭), oblique 등
- font-variant — small-caps 등
- font-weight — bold, normal, 숫자 값 등
- font-size / line-height — 글꼴 크기와 줄 높이 (예: 13px/1.5)
- font-family — georgia, serif 등
예제
다음 코드를 실행하면 font 속성을 사용하여 텍스트에 여러 글꼴 속성을 한 번에 적용하는 방법을 확인할 수 있습니다.
<html> <head> </head> <body> <p style = "font:italic small-caps bold 13px georgia;"> 모든 글꼴 속성을 텍스트에 한 번에 적용합니다. </p> </body> </html>
주의 사항
font 약식 속성을 사용할 때는 font-size와 font-family 값을 반드시 포함해야 합니다. 이 두 값 중 하나라도 빠지면 브라우저가 전체 선언을 무시합니다. 또한 생략된 속성은 기본값으로 초기화되므로, 기존에 설정한 글꼴 스타일이 의도치 않게 덮어쓰이지 않도록 주의해야 합니다.