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
Mediavisual
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:
Canonical orderorder of appearance in the formal grammar of the values

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 3Opera Full support 3.5Safari Full support 1WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
System fontsChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 4Opera Full support 6Safari Full support 1WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Support for font-stretch valuesChrome Full support YesEdge ? Firefox Full support 43IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Full support 43Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown

문서 태그 및 공헌자

이 페이지의 공헌자: urty5656
최종 변경자: urty5656,