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-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
를 가지고 있습니다.
형식 구문
[ (en-US) [ (en-US) <'font-style'> (en-US) || (en-US) <font-variant-css21> || (en-US) <'font-weight'> || (en-US) <'font-stretch'> (en-US) ] (en-US)? (en-US) <'font-size'> [ (en-US) / <'line-height'> (en-US) ] (en-US)? (en-US) <'font-family'> ] (en-US) | (en-US) caption | (en-US) icon | (en-US) menu | (en-US) message-box | (en-US) small-caption | (en-US) status-barwhere
<font-variant-css21> = [ (en-US) normal | (en-US) small-caps ] (en-US)
예제
/* 글씨 크기 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 }
HTML Content
Change the radio buttons below to see the generated shorthand and it's 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/>CSS Content
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;
}
JavaScript Content
var textAreas = document.getElementsByClassName("curCss"),
shortText = "",
getCheckedValue,
setCss,
getProperties,
injectCss;
getProperties = function () {
shortText =
getCheckedValue("font_style") + " " +
getCheckedValue("font_variant") + " " +
getCheckedValue("font_weight") + " " +
getCheckedValue("font_size") +
getCheckedValue("line_height") + " " +
getCheckedValue("font_family");
return shortText;
}
getCheckedValue = function(radio_name) {
oRadio = document.forms[0].elements[radio_name];
for (var i = 0; i < oRadio.length; i++) {
if(oRadio[i].checked) {
var propInput = "input_" + radio_name,
curElemName = "input_" + radio_name,
curElem = document.getElementById(curElemName);
curElem.value = oRadio[i].value;
return oRadio[i].value;
}
}
}
setCss = function () {
getProperties();
injectCss(shortText);
}
injectCss = function(cssFragment) {
old = document.body.getElementsByTagName("style");
if (old.length > 1) {
old[1].parentElement.removeChild(old[1]);
}
css = document.createElement("style");
css.innerHTML = ".fontShortHand{font: " + cssFragment + "}";
document.body.appendChild(css);
}
setCss();
명세
Specification | Status | Comment |
---|---|---|
CSS Fonts Module Level 3 The definition of 'font' in that specification. |
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 (en-US) and ::first-line (en-US). |
상속 | yes |
Percentages | as each of the properties of the shorthand:
|
Computed value | as each of the properties of the shorthand:
|
Animation type | as each of the properties of the shorthand:
|
브라우저 호환성
BCD tables only load in the browser