CSS font 속성 – 단축 글꼴 속성

`font` 속성의 이해

font 속성은
다양한 글꼴 관련 속성을 단축형으로 한 번에 지정할 수 있습니다.
또한, 단일 키워드로 시스템 글꼴을 지정할 수 있습니다.

이 속성을 사용하면 글꼴과 관련된 여러 스타일을 효율적으로 제어할 수 있습니다.

CSS 데모: font 데모 버튼을 클릭해 보세요!

font 속성은 글꼴과 관련된 여러 속성(font-style, font-variant, font-weight, font-size, line-height, font-family)을 한 번에 설정할 수 있는 단축 속성(shorthand property)입니다.

font 속성의 형식은 다음과 같습니다.

형식 구문

CSS

selector {
    font: [ <'font-style'> || 
            <font-variant-css2> ||
            <'font-weight'> ||
            <font-width-css3>
          ]? 
          <'font-size'> 
          [ / <'line-height'> ]? 
          <'font-family'> |
          <system-family-name>
}

구문

CSS

/* <'font-size'> <'font-family'> */
font: 1.4em "바탕체", sans-serif;

/* <'font-style'> <'font-size'> <'font-family'> */
font: italic 18px "바탕체", serif;

/* <font-variant-css2> <'font-weight'> <'font-size'> / <'line-height'> <'font-family'> */
font: small-caps bold 18px/1.4 sans-serif;

/*  <system-family-name> */
font: message-box;

font 속성은 두 가지 형식의 구문이 있습니다. 단일 키워드 구문과 단축 속성 구문입니다.

단축 속성 구문
여러 글꼴 관련 속성의 단축 속성으로 지정하는 구문
단일 키워드 구문
하나의 키워드를 지정해 시스템 글꼴을 사용하도록 설정하는 구문

아래에서 두 가지 형식의 구문을 설명합니다.

단축 속성 구문

여러 글꼴 관련 속성의 단축 속성(shorthand property)으로 지정하는 구문입니다.

구성 속성

font-variant 속성의 구성 속성
`font-style`	글꼴의 기울임 스타일을 지정합니다.
`font-variant`	소문자를 작은 대문자로 변형합니다. CSS Level 2.1에서 정의한 `normal`과 `small-caps`만 사용할 수 있습니다.
`font-weight`	글꼴의 굵기를 지정합니다.
`font-stretch`	글꼴에서 일반, 축소, 확장된 모양을 선택합니다. `<font-width-css3>` 키워드 값(`normal`, `ultra-condensed`, `extra-condensed`, `condensed`, `semi-condensed`, `semi-expanded`, `expanded`, `extra-expanded`, `ultra-expanded`)만을 사용할 수 있습니다.
`font-size`	글꼴의 크기를 지정합니다.
`line-height`	텍스트의 라인 높이(행간)를 설정합니다.
`font-family`	요소의 글꼴을 지정합니다.

알아두세요!
글자(폰트)의 색상을 지정하는 color 속성은 구성 속성에 포함되지 않습니다.

필수 속성

font 속성을 단축 속성으로 사용하려면 다음의 구성 속성 값을 필수로 포함해야 합니다. 하나라도 생략되면 선언이 무시됩니다.

옵션 속성

선택적으로 다음의 구성 속성 값을 포함할 수 있습니다.

구문 규칙

다음의 구문 규칙을 지켜야 합니다.

font-style, font-variant, font-weight는 font-size보다 앞에 나와야 합니다.
font-variant는 CSS 2.1에서 정의된 값인 normal과 small-caps만을 사용할 수 있습니다.
font-stretch는 <font-width-css3> 키워드 값(normal, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded)만을 사용할 수 있습니다.
line-height는 font-size 뒤에 바로 와야 하며, 앞뒤로 공백을 두지 않는 슬래시(/)로 구분하여 다음과 같이 지정해야 합니다. (예: 16px/1.5, 16px/normal)
font-family는 반드시 마지막에 지정해야 합니다.

다음은 font 속성의 구문 규칙을 어긴 예제입니다. 규칙 위반이 되는 이유를 함께 설명하겠습니다.

CSS

/* font-family가 마지막에 지정되지 않음 */
font: Arial normal 16px/1.5;

/* line-height가 슬래시로 구분되지 않음 */
font: normal 16px 1.5 Arial;

/* font-size는 font-style, font-variant, font-weight 다음에 위치해야 함 */
font: 16px normal small-caps Arial;

/* font-family가 마지막에 지정되지 않음 */
font: Arial 16px/1.5 normal;

단일 키워드 구문

하나의 키워드를 지정해 시스템 폰트를 사용하도록 설정하는 구문입니다.

font를 시스템 글꼴을 사용하도록 설정하려면 시스템 글꼴에 해당하는 다음의 키워드 중에서 하나를 사용해야 합니다.

font 속성으로의 값으로 사용할 수 있는 시스템 글꼴
`caption`	캡션 텍스트로 캡션이 있는 컨트롤(예: 버튼, 드롭다운 등)에 사용되는 시스템 글꼴입니다.
`icon`	아이콘 레이블로 아이콘에 레이블을 지정하는 데 사용되는 시스템 글꼴입니다.
`menu`	메뉴 항목으로 메뉴(예: 드롭다운 메뉴 및 메뉴 목록)에 사용되는 시스템 글꼴입니다.
`message-box`	메시지 박스 텍스트으로 대화 상자에 사용되는 시스템 글꼴입니다.
`small-caption`	작은 캡션 텍스트로 작은 컨트롤에 레이블을 지정하는 데 사용되는 시스템 글꼴입니다.
`status-bar`	상태 바 텍스트로 창 상태 표시줄에 사용되는 시스템 글꼴입니다.

각 시스템 글꼴은 디바이스의 운영 체제에 따라 다르게 렌더링되며, 설치된 글꼴에 의존합니다.

예제

예제를 통해서 단일 키워드 구문으로 시스템 글꼴을 설정하는 방법에 대해 살펴보겠습니다.

형식 정의

font-variant 속성의 형식 정의
초깃값	각 구성 속성의 초깃값
적용 요소	모든 요소
상속	예
애니메이션	`font-style` - 아니오 `font-variant` - 아니오 `font-weight` - 예 `font-stretch` - 예 `font-size` - 예 `line-height` - 예 `font-weight` - 아니오

주의할 점

font 속성도 모든 단축 속성(예를 들어, background, text-decoration)과 마찬가지로 이 속성에 값을 새로 지정하면 기존에 지정한 개별 구성 속성들이 모두 초깃값으로 덮어씌워집니다.

예제를 통해 살펴보겠습니다.

암묵적 재설정

font 속성으로 설정할 수 없는 속성이지만, font 속성이 설정되면 초깃값으로 재설정되는 속성들이 있습니다.

브라우저 호환성

font 속성의 브라우저 호환성
속성과 값	데스크탑 Chrome	데스크탑데스크탑 Edge	데스크탑 Firefox	Safari
`font`	1	12	1	1
`font-stretch` 값 지원	60	79	43	11

명세서

font 속성의 명세서 사양
명세서 사양
`font`	CSS Fonts Module Level 4 #font-prop

참고문헌

MDN - font

font 속성의 이해