font

font CSS 속성은 font-style, font-variant, font-weight, font-size, line-height, font-family단축 속성입니다. 요소의 글꼴을 시스템 폰트로 설정할 수도 있습니다.

다른 단축 속성과 마찬가지로, 생략한 속성은 초기값으로 설정하며 이 과정에서 다른 속성으로 설정한 값을 덮어 쓸 수도 있습니다. font 속성으로 설정할 수 없는 font-stretch, font-size-adjust, font-kerning의 값도 초기값으로 돌아갑니다.

구문

font 속성은 하나의 키워드를 지정해 시스템 폰트를 사용하도록 설정할 수도 있고, 여러 글꼴 관련 속성의 단축 속성으로도 사용할 수 있습니다.

font를 시스템 폰트 키워드로 사용하려면 caption, icon, menu, message-box, small-caption, status-bar 중 하나를 사용해야 합니다.

font를 단축 속성으로 사용하려면,

  • 다음 속성의 값을 포함해야 합니다.
  • 다음 속성의 값을 포함할 수 있습니다.
  • font-style, font-variantfont-weight는 font-size의 앞에 와야 합니다.
  • font-variant는 CSS 2.1에서 정의한 normal과 small-caps만 사용할 수 있습니다.
  • line-height는 font-size 바로 다음에 와야 하며 "/"로 구분해야 합니다. 예: "16px/3"
  • font-family는 마지막 값이어야 합니다.

<'font-style'>
font-style 참고
<'font-variant'>
font-variant 참고
<'font-weight'>
font-weight 참고
<'font-stretch'>
font-stretch 참고
<'font-size'>
font-size 참고
<'line-height'>
line-height 참고
<'font-family'>
font-family 참고

시스템 폰트 키워드

caption
버튼, 드랍다운 메뉴 등 설명이 붙은 컨트롤에 사용하는 시스템 폰트.
icon
아이콘 이름에 사용하는 시스템 폰트.
드랍다운 메뉴, 메뉴 리스트 등 메뉴에서 사용하는 시스템 폰트.
message-box
다이얼로그 창에 사용하는 폰트.
small-caption
소형 컨트롤에 사용하는 시스템 폰트.
status-bar
창의 상태표시줄에 사용하는 시스템 폰트.
추가 시스템 폰트 키워드
각 브라우저마다 더 많은 키워드를 접두사와 함께 구현하고 있습니다. Gecko는 -moz-window, -moz-document, -moz-desktop, -moz-info, -moz-dialog, -moz-button, -moz-pull-down-menu, -moz-list-moz-field를 가지고 있습니다.

형식 구문

[ [ <'font-style'> || <font-variant-css21> || <'font-weight'> || <'font-stretch'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar

where
<font-variant-css21> = [ normal | small-caps ]

예제

/* 글씨 크기 12픽셀, 줄 높이 14픽셀, 글꼴 sans-serif */
p { font: 12px/14px sans-serif }

/* 글씨 크기 부모 또는 기본값(부모가 없을 경우)의 80%, 글꼴 sans-serif */
p { font: 80% sans-serif }

/* 글씨 굵기 굵게, 스타일 기울이기, 글씨 크기 크게, 글꼴 serif */
p { font: bold italic large serif }

/* 창의 상태표시줄과 같은 글꼴 사용 */
p { font: status-bar }

명세

Specification Status Comment
CSS Fonts Module Level 3
The definition of 'font' in that specification.
Candidate Recommendation Added support for font-stretch values.
CSS Level 2 (Revision 1)
The definition of 'font-weight' in that specification.
Recommendation Added support for keywords.
CSS Level 1
The definition of 'font' in that specification.
Recommendation Initial definition.
초기값as each of the properties of the shorthand:
적용대상all elements. It also applies to ::first-letter and ::first-line.
상속yes
Percentagesas each of the properties of the shorthand:
  • font-size: refer to the parent element's font size
  • line-height: refer to the font size of the element itself
Computed valueas each of the properties of the shorthand:
  • font-style: as specified
  • font-variant: as specified
  • font-weight: the keyword or the numerical value as specified, with bolder and lighter transformed to the real value
  • font-stretch: as specified
  • font-size: as specified, but with relative lengths converted into absolute lengths
  • line-height: for percentage and length values, the absolute length, otherwise as specified
  • font-family: as specified
Animation typeas each of the properties of the shorthand:

브라우저 호환성

BCD tables only load in the browser