path: root/files/ko/web/css/font/index.html

---
title: font
slug: Web/CSS/font
tags:
  - CSS
  - CSS Fonts
  - CSS Property
  - Reference
translation_of: Web/CSS/font
---
<div>{{CSSRef}}</div>

<p><strong><code>font</code></strong> CSS 속성은 {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}}, {{cssxref("font-family")}}의 <a href="/ko/docs/Web/CSS/Shorthand_properties">단축 속성</a>입니다. 요소의 글꼴을 시스템 폰트로 설정할 수도 있습니다.</p>

<div>{{EmbedInteractiveExample("pages/css/font.html")}}</div>



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

<h2 id="구문">구문</h2>

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

<p><code>font</code>를 시스템 폰트 키워드로 사용하려면 <code>{{anch("caption")}}</code>, <code>{{anch("icon")}}</code>, <code>{{anch("menu")}}</code>, <code>{{anch("message-box")}}</code>, <code>{{anch("small-caption")}}</code>, <code>{{anch("status-bar")}}</code> 중 하나를 사용해야 합니다.</p>

<p><code>font</code>를 단축 속성으로 사용하려면,</p>

<ul>
 <li>다음 속성의 값을 포함해야 합니다.
  <ul>
   <li>{{cssxref("&lt;font-size&gt;")}}</li>
   <li>{{cssxref("&lt;font-family&gt;")}}</li>
  </ul>
 </li>
 <li>다음 속성의 값을 포함할 수 있습니다.
  <ul>
   <li>{{cssxref("&lt;font-style&gt;")}}</li>
   <li>{{cssxref("&lt;font-variant&gt;")}}</li>
   <li>{{cssxref("&lt;font-weight&gt;")}}</li>
   <li>{{cssxref("&lt;line-height&gt;")}}</li>
  </ul>
 </li>
 <li><code>font-style</code>, <code>font-variant</code>, <code>font-weight</code>는 <code>font-size</code>의 앞에 와야 합니다.</li>
 <li><code>font-variant</code>는 CSS 2.1에서 정의한 <code>normal</code>과 <code>small-caps</code>만 사용할 수 있습니다.</li>
 <li><code>line-height</code>는 <code>font-size</code> 바로 다음에 와야 하며 "/"로 구분해야 합니다. 예: "<code>16px/3</code>"</li>
 <li><code>font-family</code>는 마지막 값이어야 합니다.</li>
</ul>

<h3 id="값">값</h3>

<dl>
 <dt id="&lt;'font-style'>"><code>&lt;'font-style'&gt;</code></dt>
 <dd>{{cssxref("font-style")}} 참고</dd>
 <dt id="&lt;'font-variant'>"><code>&lt;'font-variant'&gt;</code></dt>
 <dd>{{cssxref("font-variant")}} 참고</dd>
 <dt id="&lt;'font-weight'>"><code>&lt;'font-weight'&gt;</code></dt>
 <dd>{{cssxref("font-weight")}} 참고</dd>
 <dt id="&lt;'font-stretch'>"><code>&lt;'font-stretch'&gt;</code></dt>
 <dd>{{cssxref("font-stretch")}} 참고</dd>
 <dt id="&lt;'font-size'>"><code>&lt;'font-size'&gt;</code></dt>
 <dd>{{cssxref("font-size")}} 참고</dd>
 <dt id="&lt;'line-height'>"><code>&lt;'line-height'&gt;</code></dt>
 <dd>{{cssxref("line-height")}} 참고</dd>
 <dt id="&lt;'font-family'>"><code>&lt;'font-family'&gt;</code></dt>
 <dd>{{cssxref("font-family")}} 참고</dd>
</dl>

<h4 id="시스템_폰트_키워드">시스템 폰트 키워드</h4>

<dl>
 <dt id="caption"><code>caption</code></dt>
 <dd>버튼, 드랍다운 메뉴 등 설명이 붙은 컨트롤에 사용하는 시스템 폰트.</dd>
 <dt id="icon"><code>icon</code></dt>
 <dd>아이콘 이름에 사용하는 시스템 폰트.</dd>
 <dt id="menu"><code>menu</code></dt>
 <dd>드랍다운 메뉴, 메뉴 리스트 등 메뉴에서 사용하는 시스템 폰트.</dd>
 <dt id="message-box"><code>message-box</code></dt>
 <dd>다이얼로그 창에 사용하는 폰트.</dd>
 <dt id="small-caption"><code>small-caption</code></dt>
 <dd>소형 컨트롤에 사용하는 시스템 폰트.</dd>
 <dt id="status-bar"><code>status-bar</code></dt>
 <dd>창의 상태표시줄에 사용하는 시스템 폰트.</dd>
 <dt>추가 시스템 폰트 키워드</dt>
 <dd>각 브라우저마다 더 많은 키워드를 접두사와 함께 구현하고 있습니다. Gecko는 <code>-moz-window</code>, <code>-moz-document</code>, <code>-moz-desktop</code>, <code>-moz-info</code>, <code>-moz-dialog</code>, <code>-moz-button</code>, <code>-moz-pull-down-menu</code>, <code>-moz-list</code>, <code>-moz-field</code>를 가지고 있습니다.</dd>
</dl>

<h3 id="형식_구문">형식 구문</h3>

<pre class="syntaxbox">{{csssyntax}}</pre>

<h2 id="예제">예제</h2>

<pre class="brush: css">/* 글씨 크기 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 }
</pre>

<p id="HTML_Content" class="hidden">HTML Content</p>

    Change the radio buttons below to see the generated shorthand and it's effect.
&lt;/p&gt;
&lt;form action="createShortHand()"&gt;
    &lt;div class="cf"&gt;
        &lt;div class="setPropCont"&gt;
            font-style&lt;br/&gt;
            &lt;input type="radio" id="font-style-none" name="font_style" checked="" value="" onchange="setCss()"&gt; &lt;label for="font-style-none"&gt;none&lt;/label&gt;&lt;br/&gt;
            &lt;input type="radio" id="font-style-normal" name="font_style" value="normal" onchange="setCss()"&gt; &lt;label for="font-style-normal"&gt;normal&lt;/label&gt;&lt;br/&gt;
            &lt;input type="radio" id="font-style-italic" name="font_style" value="italic" onchange="setCss()"&gt; &lt;label for="font-style-italic"&gt;italic&lt;/label&gt;&lt;br/&gt;
            &lt;input type="radio" id="font-style-oblique" name="font_style" value="oblique" onchange="setCss()"&gt; &lt;label for="font-style-oblique"&gt;oblique&lt;/label&gt;
        &lt;/div&gt;

        &lt;div class="setPropCont"&gt;
            font-variant&lt;br&gt;
            &lt;input type="radio" id="font-variant-none" name="font_variant" checked="" value=" " onchange="setCss()"&gt; &lt;label for="font-variant-none"&gt;none&lt;/label&gt;&lt;br/&gt;
            &lt;input type="radio" id="font-variant-normal" name="font_variant" value="normal" onchange="setCss()"&gt; &lt;label for="font-variant-normal"&gt;normal&lt;/label&gt;&lt;br/&gt;
            &lt;input type="radio" id="font-variant-small-caps" name="font_variant" value="small-caps" onchange="setCss()"&gt; &lt;label for="font-variant-small-caps"&gt;small-caps&lt;/label&gt;
        &lt;/div&gt;

        &lt;div class="setPropCont"&gt;
            font-weight&lt;br/&gt;
            &lt;input type="radio" id="font-weight-none" name="font_weight" value="" onchange="setCss()"&gt; &lt;label for="font-weight-none"&gt;none&lt;/label&gt;&lt;br/&gt;
            &lt;input type="radio" id="font-weight-normal" checked="" name="font_weight" value="400" onchange="setCss()"&gt; &lt;label for="font-weight-normal"&gt;normal&lt;/label&gt;&lt;br/&gt;
            &lt;input type="radio" id="font-weight-bold" name="font_weight" value="700" onchange="setCss()"&gt; &lt;label for="font-weight-bold"&gt;bold&lt;/label&gt;
        &lt;/div&gt;

        &lt;div class="setPropCont"&gt;
            font-size&lt;br/&gt;
            &lt;input type="radio" id="font-size-12px" name="font_size" value="12px" onchange="setCss()"&gt; &lt;label for="font-size-12px"&gt;12px&lt;/label&gt;&lt;br/&gt;
            &lt;input type="radio" id="font-size-16px" name="font_size" value="16px" checked="" onchange="setCss()"&gt; &lt;label for="font-size-16px"&gt;16px&lt;/label&gt;&lt;br/&gt;
            &lt;input type="radio" id="font-size-24px" name="font_size" value="24px" onchange="setCss()"&gt; &lt;label for="font-size-24px"&gt;24px&lt;/label&gt;
        &lt;/div&gt;

        &lt;div class="setPropCont"&gt;
            line-height&lt;br/&gt;
            &lt;input type="radio" id="line-height-none" name="line_height" checked="" value="" onchange="setCss()"&gt; &lt;label for="line-height-none"&gt;none&lt;/label&gt;&lt;br/&gt;
            &lt;input type="radio" id="line-height-1.2" name="line_height" value="/1.2" onchange="setCss()"&gt; &lt;label for="line-height-1.2"&gt;1.2&lt;/label&gt;&lt;br/&gt;
            &lt;input type="radio" id="line-height-3" name="line_height" value="/3" onchange="setCss()"&gt; &lt;label for="line-height-3"&gt;3&lt;/label&gt;
        &lt;/div&gt;&lt;br/&gt;

        &lt;div class="setPropCont fontfamily"&gt;
            font-family&lt;br/&gt;
            &lt;input type="radio" id="font-family-courier" name="font_family" checked="" value="courier" onchange="setCss(5,'courier')"&gt; &lt;label for="font-family-courier"&gt;courier&lt;/label&gt;&lt;br/&gt;            &lt;input type="radio" id="font-family-serif" name="font_family" value="serif" onchange="setCss()"&gt; &lt;label for="font-family-serif"&gt;serif&lt;/label&gt;&lt;br /&gt;
            &lt;input type="radio" id="font-family-sans-serif" name="font_family" value="sans-serif" onchange="setCss()"&gt; &lt;label for="font-family-sans-serif"&gt;sans-serif&lt;/label&gt;&lt;br /&gt;            &lt;input type="radio" id="font-family-arial" name="font_family" value="arial" onchange="setCss()"&gt; &lt;label for="font-family-arial"&gt;Arial&lt;/label&gt;&lt;br /&gt;
            &lt;input type="radio" id="font-family-monospace" name="font_family" value="monospace" onchange="setCss()"&gt; &lt;label for="font-family-monospace"&gt;monospace&lt;/label&gt;&lt;br /&gt;            &lt;input type="radio" id="font-family-cursive" name="font_family" value="cursive" onchange="setCss()"&gt; &lt;label for="font-family-cursive"&gt;cursive&lt;/label&gt;&lt;br /&gt;
            &lt;input type="radio" id="font-family-fantasy" name="font_family" value="fantasy" onchange="setCss()"&gt; &lt;label for="font-family-fantasy"&gt;fantasy&lt;/label&gt;&lt;br /&gt;            &lt;input type="radio" id="font-family-system-ui" name="font_family" value="system-ui" onchange="setCss()"&gt; &lt;label for="font-family-system-ui"&gt;system-ui&lt;/label&gt;&lt;br /&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;div class="cf propInputs"&gt;
        &lt;div class="propInputCont tar"&gt;
            font :
        &lt;/div&gt;
        &lt;div class="propInputCont"&gt;
            &lt;input type="text" class="curCss" id="input_font_style"&gt;&lt;br/&gt;
            font-style &lt;br/&gt;
            optional

        &lt;/div&gt;
        &lt;div class="propInputCont"&gt;
            &lt;input type="text" class="curCss" id="input_font_variant"&gt; &lt;br/&gt;
            font-variant &lt;br/&gt;
            optional
        &lt;/div&gt;
        &lt;div class="propInputCont"&gt;
            &lt;input type="text" class="curCss" id="input_font_weight"&gt; &lt;br/&gt;
            font-weight &lt;br/&gt;
            optional
        &lt;/div&gt;
        &lt;div class="propInputCont"&gt;
            &lt;input type="text" class="curCss mandatory" id="input_font_size"&gt; &lt;br/&gt;
            font-size &lt;br/&gt;
            mandatory
        &lt;/div&gt;
        &lt;div class="propInputCont"&gt;
            &lt;input type="text" class="curCss" id="input_line_height"&gt; &lt;br/&gt;
            line-height &lt;br/&gt;
            optional
        &lt;/div&gt;
        &lt;div class="propInputCont"&gt;
            &lt;input type="text" class="curCss mandatory" id="input_font_family"&gt; &lt;br/&gt;
            font-family &lt;br/&gt;
            mandatory
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/form&gt;

&lt;div class="fontShortHand"&gt;
    This is some sample text.
&lt;/div&gt;
&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;
</pre>

<p id="CSS_Content" class="hidden">CSS Content</p>

<pre class="brush: css" class="hidden">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;
}</pre>

<p id="JavaScript_Content" class="hidden">JavaScript Content</p>

<pre class="brush: js" class="hidden">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 &lt; 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 &gt; 1) {
    old[1].parentElement.removeChild(old[1]);
  }
  css = document.createElement("style");
  css.innerHTML = ".fontShortHand{font: " + cssFragment + "}";
  document.body.appendChild(css);
}

setCss();</pre>

<p>{{ EmbedLiveSample('예제','100%', '380px')}}</p>

<h2 id="명세">명세</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS3 Fonts', '#font-prop', 'font')}}</td>
   <td>{{ Spec2('CSS3 Fonts')}}</td>
   <td>Added support for <code>font-stretch</code> values.</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS2.1', 'fonts.html#font-shorthand', 'font-weight')}}</td>
   <td>{{ Spec2('CSS2.1')}}</td>
   <td>Added support for keywords.</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS1', '#font', 'font')}}</td>
   <td>{{ Spec2('CSS1')}}</td>
   <td>Initial definition.</td>
  </tr>
 </tbody>
</table>

<p>{{cssinfo}}</p>

<h2 id="브라우저_호환성">브라우저 호환성</h2>



<p>{{Compat("css.properties.font")}}</p>