font

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

시도해보기

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

구문

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

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

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

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

<'font-style'>

font-style (en-US) 참고

<'font-variant'>

font-variant (en-US) 참고

<'font-weight'>

font-weight 참고

<'font-stretch'>

font-stretch (en-US) 참고

<'font-size'>

font-size 참고

<'line-height'>

line-height (en-US) 참고

<'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 = 
[ [ <'font-style'> || <font-variant-css2> || <'font-weight'> || <font-stretch-css3> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] |
caption |
icon |
menu |
message-box |
small-caption |
status-bar

<font-variant-css2> =
normal |
small-caps

<font-stretch-css3> =
normal |
ultra-condensed |
extra-condensed |
condensed |
semi-condensed |
semi-expanded |
expanded |
extra-expanded |
ultra-expanded

Examples

Setting font properties

/* Set the font size to 12px and the line height to 14px.
   Set the font family to sans-serif */
p { font: 12px/14px sans-serif }

/* Set the font size to 80% of the parent element
   or default value (if no parent element present).
   Set the font family to sans-serif */
p { font: 80% sans-serif }

/* Set the font weight to bold,
   the font-style to italic,
   the font size to large,
   and the font family to serif. */
p { font: bold italic large serif }

/* Use the same font as the status bar of the window */
p { font: status-bar }

Live sample

Specifications

Specification
Unknown specification
# font-prop

Browser compatibility

BCD tables only load in the browser

See also