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:
1.2rem "Fira Sans",
sans-serif;
font:
italic 1.2rem "Fira Sans",
serif;
font: italic small-caps bold 16px/2 cursive;
font: small-caps bold 24px/1 sans-serif;
font: caption;
<section id="default-example">
<p id="example-element">
London. Michaelmas term lately over, and the Lord Chancellor sitting in
Lincoln's Inn Hall. Implacable November weather. As much mud in the streets
as if the waters had but newly retired from the face of the earth, and it
would not be wonderful to meet a Megalosaurus, forty feet long or so,
waddling like an elephantine lizard up Holborn Hill.
</p>
</section>
@font-face {
font-family: "Fira Sans";
src:
local("FiraSans-Regular"),
url("/shared-assets/fonts/FiraSans-Regular.woff2") format("woff2");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Fira Sans";
src:
local("FiraSans-Italic"),
url("/shared-assets/fonts/FiraSans-Italic.woff2") format("woff2");
font-weight: normal;
font-style: italic;
}
section {
margin-top: 10px;
font-size: 1.1em;
}
다른 단축 속성과 마찬가지로, 생략한 속성은 초기값으로 설정하며 이 과정에서 다른 속성으로 설정한 값을 덮어 쓸 수도 있습니다. 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 |