diff options
Diffstat (limited to 'files/ko/web/css/@font-face')
| -rw-r--r-- | files/ko/web/css/@font-face/font-display/index.html | 101 | ||||
| -rw-r--r-- | files/ko/web/css/@font-face/index.html | 216 |
2 files changed, 317 insertions, 0 deletions
diff --git a/files/ko/web/css/@font-face/font-display/index.html b/files/ko/web/css/@font-face/font-display/index.html new file mode 100644 index 0000000000..20d334f95c --- /dev/null +++ b/files/ko/web/css/@font-face/font-display/index.html @@ -0,0 +1,101 @@ +--- +title: font-display +slug: Web/CSS/@font-face/font-display +translation_of: Web/CSS/@font-face/font-display +--- +<div>{{CSSRef}}</div> + +<p><strong><code>font-display</code></strong> 설명자(descriptor)는 font face가 표시되는 방법을 결정합니다. 이는 다운로드 여부와 사용 시기에 따라 다릅니다.</p> + +<h2 id="The_font_display_timeline">The font display timeline</h2> + +<p>font display 시각표는 유저 에이전트가 지정된 다운로드 폰트를 사용하려는 순간 시작하는 타이머를 기반으로 합니다. 시각표는 아래의 세 가지 기간(period)으로 나뉘어져 font face를 사용하는 모든 요소(element)의 렌더링 동작을 나타냅니다.</p> + +<dl> + <dt>폰트 차단 기간</dt> + <dd>font face가 로드되지 않은 경우 font face를 사용하려는 요소는 <em>보이지 않는</em> 대체 폰트를 렌더링 합니다. 이 기간 동안 font face가 성공적으로 로드되면 요청된 폰트로 다시 렌더링 됩니다.</dd> + <dt>폰트 교체 기간</dt> + <dd>font face가 로드되지 않은 경우 font face를 사용하려는 요소는 (텍스트가 표시되는)대체 폰트를 렌더링 합니다. 이 기간 동안 font face가 성공적으로 로드되면 요청된 폰트로 다시 렌더링 됩니다.</dd> + <dt>폰트 실패 기간</dt> + <dd>font face가 로드되지 않은 경우 유저 에이전트는 로드 실패로 취급하고 정상적인 대체 폰트를 렌더링 합니다.</dd> +</dl> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: css; notranslate">/* Keyword values */ +font-display: auto; +font-display: block; +font-display: swap; +font-display: fallback; +font-display: optional;</pre> + +<h3 id="Values">Values</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>font display 전략은 유저 에이전트에 의해 정의됩니다.</dd> + <dt><code>block</code></dt> + <dd>font face에 짧은 차단 기간과 무한대의 교체 기간을 부여합니다.</dd> + <dt><code>swap</code></dt> + <dd>font face에 매우 작은 차단 기간과 무한대의 교체 기간을 부여합니다.</dd> + <dt><code>fallback</code></dt> + <dd>font face에 매우 작은 차단 기간과 짧은 교체 기간을 부여합니다.</dd> + <dt><code>optional</code></dt> + <dd>font face에 매우 작은 차단 기간과 교체 기간을 부여합니다.</dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<h2 id="Examples">Examples</h2> + +<pre class="brush: css; highlight[7] notranslate">@font-face { + font-family: ExampleFont; + src: url(/path/to/fonts/examplefont.woff) format('woff'), + url(/path/to/fonts/examplefont.eot) format('eot'); + font-weight: 400; + font-style: normal; + font-display: fallback; +}</pre> + +<h2 id="Specifications">Specifications</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('CSS4 Fonts', '#font-display-desc', 'font-display')}}</td> + <td>{{Spec2('CSS4 Fonts')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("css.at-rules.font-face.font-display")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{cssxref("@font-face/font-family", "font-family")}}</li> + <li>{{cssxref("@font-face/font-stretch", "font-stretch")}}</li> + <li>{{cssxref("@font-face/font-style", "font-style")}}</li> + <li>{{cssxref("@font-face/font-weight", "font-weight")}}</li> + <li>{{cssxref("@font-face/font-variant", "font-variant")}}</li> + <li>{{cssxref("font-feature-settings", "font-feature-settings")}}</li> + <li>{{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}</li> + <li>{{cssxref("@font-face/src", "src")}}</li> + <li>{{cssxref("@font-face/unicode-range", "unicode-range")}}</li> +</ul> diff --git a/files/ko/web/css/@font-face/index.html b/files/ko/web/css/@font-face/index.html new file mode 100644 index 0000000000..9ba2e223e6 --- /dev/null +++ b/files/ko/web/css/@font-face/index.html @@ -0,0 +1,216 @@ +--- +title: '@font-face' +slug: Web/CSS/@font-face +translation_of: Web/CSS/@font-face +--- +<p>{{CSSRef}}</p> + +<h2 id="요약(Summary)">요약(Summary)</h2> + +<p><a href="/en/CSS" title="CSS">CSS</a> <a href="/en/CSS/At-rule" title="At-rule">at-rule</a> 인 <code>@font-face</code> 를 사용하여 웹페이지의 텍스트에 온라인폰트(online fonts)를 적용할 수 있다. <code style="font-size: 14px;">@font-face</code> 를 사용하여 웹페이지 제작자가 원하는 폰트를 사용할 수 있게함으로써, 컴퓨터에 설치된 폰트만을 사용해야했던 제약이 없어지게되었다. <code>@font-face</code> at-rule 은 CSS의 top-level에서 뿐 아니라, <a href="/en/CSS/At-rule#Conditional_Group_Rules" title="en/CSS/At-rule#Conditional_Group_Rules">CSS conditional-group at-rule</a> 안에서도 사용될 수도 있다. </p> + +<p>{{ seeCompatTable() }}</p> + +<h2 id="문법(Syntax)">문법(Syntax)</h2> + +<pre>@font-face { + font-family: <a-remote-font-name>; + src: <source> [,<source>]*; + [font-weight: <weight>]; + [font-style: <style>]; +} +</pre> + +<h3 id="속성값(Values)">속성값(Values)</h3> + +<dl> + <dt><a-remote-font-name> </dt> + <dd>font 속성에서 폰트명(font face)으로 지정될 이름을 설정한다.</dd> + <dt><source> </dt> + <dd>원격 폰트(remote font) 파일의 위치를 나타내는 URL 값을 지정하거나, 사용자 컴퓨터에 설치된 폰트명을 <code>local("Font Name")</code>형식으로 지정하는 속성이다.</dd> + <dt><weight> </dt> + <dd><a class="internal" href="/en/CSS/font-weight" title="en/CSS/font-weight">폰트의 굵기(font weight)</a> 값.</dd> + <dt><style> </dt> + <dd><a class="internal" href="/en/CSS/font-style" title="en/CSS/font-style">폰트 스타일(font style)</a> 값.</dd> +</dl> + +<p>사용자의 로컬환경(local computer)에 설치된 폰트는 <code>local()</code> 이라는 구문을 사용하여 지정이 가능하다. 만약 해당 폰트를 찾지못한다면, 다른 대체 폰트를 찾을때까지 폰트를 검색작업을 계속 할 것이다.</p> + +<h2 id="예제(Examples)">예제(Examples)</h2> + +<p>아래는 다운로드하여 사용가능한 폰트를 설정하는 간단한 예제이며, document의 전체 body 영역에 폰트가 적용된다.</p> + +<p><a class="internal" href="/@api/deki/files/2935/=webfont-sample.html" title="/@api/deki/files/2935/=webfont-sample.html">View live sample</a></p> + +<pre><html> +<head> + <title>Web Font Sample</title> + <style type="text/css" media="screen, print"> + @font-face { + font-family: "Bitstream Vera Serif Bold"; + src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf"); + } + + body { font-family: "Bitstream Vera Serif Bold", serif } + </style> +</head> +<body> + This is Bitstream Vera Serif Bold. +</body> +</html> +</pre> + +<p>아래 예제에서는 로컬에 설치된 "Helvetica Neue Bold" 폰트가 사용된다. 만약 해당 폰트가 설치되어 있지 않다면(다른 2개의 폰트를 적용하기 위한 시도를 하고), 다운로드 가능한 "MgOpenModernaBold.ttf" 폰트가 대신 사용된다.</p> + +<pre class="brush: css">@font-face { + font-family: MyHelvetica; + src: local("Helvetica Neue Bold"), + local("HelveticaNeue-Bold"), + url(MgOpenModernaBold.ttf); + font-weight: bold; +} +</pre> + +<h2 id="주의사항(Notes)">주의사항(Notes)</h2> + +<ul> + <li>Gecko에서는, 동일 도메인 제한(same domain restriction)을 피하기 위해 <a class="internal" href="/En/HTTP_access_control" title="En/HTTP access control">HTTP access controls</a> 을 사용하지 않는한, 웹폰트(web fonts)의 사용시에는 동일 도메인 제한이 적용된다(폰트 파일은 폰트가 사용되는 페이지와 동일한 도메인상에 존재해야 함).</li> + <li> + <div class="note"><strong>주의사항:</strong> TrueType, OpenType, Web Open File(WOFF) 폰트에 대한 MIME타입이 정의되지 않았기 때문에, 파일에 적용될 MIME 타입에 대해서는 고려하지 않아도 된다.</div> + </li> + <li>Gecko에서는 웹폰트(web font)가 사용된 페이지를 표시할 때는 웹폰트가 다운로드 되는 동안 사용자의 컴퓨터에 이미 설치되어 있어 즉시 사용가능한 폰트(CSS fallback font)를 사용하여 텍스트를 표시한다. 각각의 웹폰트의 다운로드가 완료되면 Gecko는 해당 텍스트의 폰트를 교체한다. 이러한 과정은 사용자가 웹페이지 내의 텍스트를 좀 더 빨리 읽게끔 도와준다.</li> +</ul> + +<h2 id="Notes" name="Notes">명세(Specifications)</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('WOFF1.0', '', 'WOFF font format') }}</td> + <td>{{ Spec2('WOFF1.0') }}</td> + <td>Font format specification</td> + </tr> + <tr> + <td>{{ SpecName('CSS3 Fonts', '#font-face-rule', '@font-face') }}</td> + <td>{{ Spec2('CSS3 Fonts') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성(Browser_compatibility)">브라우저 호환성(Browser compatibility)</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatGeckoDesktop("1.9.1") }}</td> + <td>4.0</td> + <td>4.0</td> + <td>10.0</td> + <td>3.1</td> + </tr> + <tr> + <td><a href="/en/WOFF" title="en/About_WOFF">WOFF</a></td> + <td>{{ CompatGeckoDesktop("1.9.1") }}</td> + <td>6.0</td> + <td>9.0</td> + <td>11.10</td> + <td>5.1</td> + </tr> + <tr> + <td>SVG Font</td> + <td>{{ CompatNo() }}<br> + {{ unimplemented_inline(119490) }}</td> + <td>yes</td> + <td>{{ CompatNo() }}</td> + <td>yes</td> + <td>yes</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mini</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatGeckoMobile("1.9.1") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }}</td> + <td>10.0</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + <tr> + <td>WOFF</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatGeckoMobile("5.0") }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }}</td> + <td>11.0</td> + <td>{{ CompatNo() }}</td> + </tr> + <tr> + <td>SVG fonts</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}<br> + {{ unimplemented_inline(119490) }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatNo() }}</td> + <td>10.0</td> + <td>{{ CompatVersionUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="주의사항(Notes)_2">주의사항(Notes)</h3> + +<ul> + <li>Embedded OpenType 폰트는 특허가 적용되기 때문에, 호환성 테이블(compatibility table)에 포함되어 있지 않다. IE 9.0 이전의 브라우저에서, IE는 이 포맷(format)만을 지원했었다.</li> + <li>TrueType 과 OpenType 는 WOFF로 교체되어 포함되지 않았다.</li> +</ul> + +<h2 id="참고자료(See_also)">참고자료(See also)</h2> + +<dl> +</dl> + +<ul> + <li><a href="/en/WOFF" title="en/About WOFF">About WOFF</a></li> + <li><a class="external" href="http://www.fontsquirrel.com/fontface/generator">FontSquirrel @font-face generator</a></li> + <li><a class="external" href="http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/">Beautiful fonts with @font-face</a></li> + <li><a class="external" href="http://openfontlibrary.org/" title="http://openfontlibrary.org/">Open Font Library</a></li> + <li><a class="external" href="http://msdn.microsoft.com/en-us/library/ms530757(VS.85).aspx">Microsoft Developer Network (MSDN) @font-face reference</a></li> + <li><a class="external" href="http://caniuse.com/woff">When can I use WOFF?</a></li> + <li><a class="external" href="http://caniuse.com/svg-fonts">When can I use SVG Fonts?</a></li> +</ul> |