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
(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
p { font : 12px/14px sans-serif }
p { font : 80% sans-serif }
p { font : bold italic large serif }
p { font : status-bar }
< p>
Change the radio buttons below to see the generated shorthand and its effect.
</ p>
< form action = " createShortHand()" >
< div class = " cf" >
< div class = " setPropCont" >
font-style< br/>
< input type = " radio" id = " font-style-none" name = " font_style" checked = " " value = " " onchange = " setCss ( ) " > < label for = " font-style-none" > none</ label> < br/>
< input type = " radio" id = " font-style-normal" name = " font_style" value = " normal" onchange = " setCss ( ) " > < label for = " font-style-normal" > normal</ label> < br/>
< input type = " radio" id = " font-style-italic" name = " font_style" value = " italic" onchange = " setCss ( ) " > < label for = " font-style-italic" > italic</ label> < br/>
< input type = " radio" id = " font-style-oblique" name = " font_style" value = " oblique" onchange = " setCss ( ) " > < label for = " font-style-oblique" > oblique</ label>
</ div>
< div class = " setPropCont" >
font-variant< br>
< input type = " radio" id = " font-variant-none" name = " font_variant" checked = " " value = " " onchange = " setCss ( ) " > < label for = " font-variant-none" > none</ label> < br/>
< input type = " radio" id = " font-variant-normal" name = " font_variant" value = " normal" onchange = " setCss ( ) " > < label for = " font-variant-normal" > normal</ label> < br/>
< input type = " radio" id = " font-variant-small-caps" name = " font_variant" value = " small-caps" onchange = " setCss ( ) " > < label for = " font-variant-small-caps" > small-caps</ label>
</ div>
< div class = " setPropCont" >
font-weight< br/>
< input type = " radio" id = " font-weight-none" name = " font_weight" value = " " onchange = " setCss ( ) " > < label for = " font-weight-none" > none</ label> < br/>
< input type = " radio" id = " font-weight-normal" checked = " " name = " font_weight" value = " 400" onchange = " setCss ( ) " > < label for = " font-weight-normal" > normal</ label> < br/>
< input type = " radio" id = " font-weight-bold" name = " font_weight" value = " 700" onchange = " setCss ( ) " > < label for = " font-weight-bold" > bold</ label>
</ div>
< div class = " setPropCont" >
font-size< br/>
< input type = " radio" id = " font-size-12px" name = " font_size" value = " 12px" onchange = " setCss ( ) " > < label for = " font-size-12px" > 12px</ label> < br/>
< input type = " radio" id = " font-size-16px" name = " font_size" value = " 16px" checked = " " onchange = " setCss ( ) " > < label for = " font-size-16px" > 16px</ label> < br/>
< input type = " radio" id = " font-size-24px" name = " font_size" value = " 24px" onchange = " setCss ( ) " > < label for = " font-size-24px" > 24px</ label>
</ div>
< div class = " setPropCont" >
line-height< br/>
< input type = " radio" id = " line-height-none" name = " line_height" checked = " " value = " " onchange = " setCss ( ) " > < label for = " line-height-none" > none</ label> < br/>
< input type = " radio" id = " line-height-1.2" name = " line_height" value = " /1.2" onchange = " setCss ( ) " > < label for = " line-height-1.2" > 1.2</ label> < br/>
< input type = " radio" id = " line-height-3" name = " line_height" value = " /3" onchange = " setCss ( ) " > < label for = " line-height-3" > 3</ label>
</ div> < br/>
< div class = " setPropCont fontfamily" >
font-family< br/>
< input type = " radio" id = " font-family-courier" name = " font_family" checked = " " value = " courier" onchange = " setCss ( 5 , 'courier' ) " > < label for = " font-family-courier" > courier</ label> < br/> < input type = " radio" id = " font-family-serif" name = " font_family" value = " serif" onchange = " setCss ( ) " > < label for = " font-family-serif" > serif</ label> < br />
< input type = " radio" id = " font-family-sans-serif" name = " font_family" value = " sans-serif" onchange = " setCss ( ) " > < label for = " font-family-sans-serif" > sans-serif</ label> < br /> < input type = " radio" id = " font-family-arial" name = " font_family" value = " arial" onchange = " setCss ( ) " > < label for = " font-family-arial" > Arial</ label> < br />
< input type = " radio" id = " font-family-monospace" name = " font_family" value = " monospace" onchange = " setCss ( ) " > < label for = " font-family-monospace" > monospace</ label> < br /> < input type = " radio" id = " font-family-cursive" name = " font_family" value = " cursive" onchange = " setCss ( ) " > < label for = " font-family-cursive" > cursive</ label> < br />
< input type = " radio" id = " font-family-fantasy" name = " font_family" value = " fantasy" onchange = " setCss ( ) " > < label for = " font-family-fantasy" > fantasy</ label> < br /> < input type = " radio" id = " font-family-system-ui" name = " font_family" value = " system-ui" onchange = " setCss ( ) " > < label for = " font-family-system-ui" > system-ui</ label> < br />
</ div>
</ div>
< div class = " cf propInputs" >
< div class = " propInputCont tar" >
font :
</ div>
< div class = " propInputCont" >
< input type = " text" class = " curCss" id = " input_font_style" > < br/>
font-style < br/>
optional
</ div>
< div class = " propInputCont" >
< input type = " text" class = " curCss" id = " input_font_variant" > < br/>
font-variant < br/>
optional
</ div>
< div class = " propInputCont" >
< input type = " text" class = " curCss" id = " input_font_weight" > < br/>
font-weight < br/>
optional
</ div>
< div class = " propInputCont" >
< input type = " text" class = " curCss mandatory" id = " input_font_size" > < br/>
font-size < br/>
mandatory
</ div>
< div class = " propInputCont" >
< input type = " text" class = " curCss" id = " input_line_height" > < br/>
line-height < br/>
optional
</ div>
< div class = " propInputCont" >
< input type = " text" class = " curCss mandatory" id = " input_font_family" > < br/>
font-family < br/>
mandatory
</ div>
</ div>
</ form>
< div class = " fontShortHand" >
This is some sample text.
</ div>
< br/> < br/> < br/> < br/> < br/> < br/>
body, input {
font : 14px arial;
overflow : hidden;
}
.propInputCont {
float : left;
text-align : center;
margin-right : 5px;
width : 80px;
}
.setPropCont {
float : left;
margin-right : 5px;
width : 120px;
}
.propInputs, .setPropCont {
margin-bottom : 1em;
}
.curCss {
border : none;
border-bottom : 1px solid black;
text-align : center;
width : 80px;
}
.mandatory {
border-bottom-color : red;
}
.cf:before,
.cf:after {
content : " " ;
display : table;
}
.cf:after {
clear : both;
}
.tar {
width : 40px;
text-align : right;
}
.fontfamily {
display : inline-block;
}
const textAreas = document. getElementsByClassName ( "curCss" ) ;
function getProperties ( ) {
return ` ${ getCheckedValue ( "font_style" ) } `
+ ` ${ getCheckedValue ( "font_variant" ) } `
+ ` ${ getCheckedValue ( "font_weight" ) } `
+ ` ${ getCheckedValue ( "font_size" ) } `
+ ` ${ getCheckedValue ( "line_height" ) } `
+ ` ${ getCheckedValue ( "font_family" ) } ` ;
}
function getCheckedValue ( radioName ) {
const radios = document. forms[ 0 ] . elements[ radioName] ;
for ( let i = 0 ; i < radios. length; i++ ) {
if ( radios[ i] . checked) {
const curElemName = ` input_ ${ radioName} ` ;
const curElem = document. getElementById ( curElemName) ;
curElem. value = radios[ i] . value;
return radios[ i] . value;
}
}
}
function setCss ( ) {
getProperties ( ) ;
injectCss ( shortText) ;
}
function injectCss ( cssFragment ) {
const old = document. body. getElementsByTagName ( "style" ) ;
if ( old. length > 1 ) {
old[ 1 ] . parentElement. removeChild ( old[ 1 ] ) ;
}
css = document. createElement ( "style" ) ;
css. textContent = ` .fontShortHand{font: ${ cssFragment} } ` ;
document. body. appendChild ( css) ;
}
setCss ( ) ;
BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.