font
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
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-variant
,font-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 =
[ [ <'font-style'> || <font-variant-css2> || <'font-weight'> || <font-width-css3> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'># ] |
<system-family-name>
<font-style> =
normal |
italic |
oblique <angle [-90deg,90deg]>?
<font-variant-css2> =
normal |
small-caps
<font-weight> =
<font-weight-absolute> |
bolder |
lighter
<font-width-css3> =
normal |
ultra-condensed |
extra-condensed |
condensed |
semi-condensed |
semi-expanded |
expanded |
extra-expanded |
ultra-expanded
<font-size> =
<absolute-size> |
<relative-size> |
<length-percentage [0,∞]> |
math
<line-height> =
normal |
<number [0,∞]> |
<length-percentage [0,∞]>
<font-family> =
[ <family-name> | <generic-family> ]#
<system-family-name> =
caption |
icon |
menu |
message-box |
small-caption |
status-bar
<font-weight-absolute> =
normal |
bold |
<number [1,1000]>
<length-percentage> =
<length> |
<percentage>
<family-name> =
<string> |
<custom-ident>+
<generic-family> =
<generic-script-specific> |
<generic-complete> |
<generic-incomplete>
<generic-script-specific> =
generic( fangsong ) |
generic( kai ) |
generic( khmer-mul ) |
generic( nastaliq )
<generic-complete> =
serif |
sans-serif |
system-ui |
cursive |
fantasy |
math |
monospace
<generic-incomplete> =
ui-serif |
ui-sans-serif |
ui-monospace |
ui-rounded
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
명세서
Specification |
---|
CSS Fonts Module Level 4 # font-prop |
브라우저 호환성
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
font | ||||||||||||
caption | ||||||||||||
Support for font-stretch values in shorthand | ||||||||||||
icon | ||||||||||||
menu | ||||||||||||
message-box | ||||||||||||
small-caption | ||||||||||||
status-bar |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support