From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- .../ko/web/css/@font-face/font-display/index.html | 101 ++++++++++ files/ko/web/css/@font-face/index.html | 216 +++++++++++++++++++++ 2 files changed, 317 insertions(+) create mode 100644 files/ko/web/css/@font-face/font-display/index.html create mode 100644 files/ko/web/css/@font-face/index.html (limited to 'files/ko/web/css/@font-face') 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 +--- +
{{CSSRef}}
+ +

font-display 설명자(descriptor)는 font face가 표시되는 방법을 결정합니다. 이는 다운로드 여부와 사용 시기에 따라 다릅니다.

+ +

The font display timeline

+ +

font display 시각표는 유저 에이전트가 지정된 다운로드 폰트를 사용하려는 순간 시작하는 타이머를 기반으로 합니다. 시각표는 아래의 세 가지 기간(period)으로 나뉘어져 font face를 사용하는 모든 요소(element)의 렌더링 동작을 나타냅니다.

+ +
+
폰트 차단 기간
+
font face가 로드되지 않은 경우 font face를 사용하려는 요소는 보이지 않는 대체 폰트를 렌더링 합니다. 이 기간 동안 font face가 성공적으로 로드되면 요청된 폰트로 다시 렌더링 됩니다.
+
폰트 교체 기간
+
font face가 로드되지 않은 경우 font face를 사용하려는 요소는 (텍스트가 표시되는)대체 폰트를 렌더링 합니다. 이 기간 동안 font face가 성공적으로 로드되면 요청된 폰트로 다시 렌더링 됩니다.
+
폰트 실패 기간
+
font face가 로드되지 않은 경우 유저 에이전트는 로드 실패로 취급하고 정상적인 대체 폰트를 렌더링 합니다.
+
+ +

{{cssinfo}}

+ +

Syntax

+ +
/* Keyword values */
+font-display: auto;
+font-display: block;
+font-display: swap;
+font-display: fallback;
+font-display: optional;
+ +

Values

+ +
+
auto
+
font display 전략은 유저 에이전트에 의해 정의됩니다.
+
block
+
font face에 짧은 차단 기간과 무한대의 교체 기간을 부여합니다.
+
swap
+
font face에 매우 작은 차단 기간과 무한대의 교체 기간을 부여합니다.
+
fallback
+
font face에 매우 작은 차단 기간과 짧은 교체 기간을 부여합니다.
+
optional
+
font face에 매우 작은 차단 기간과 교체 기간을 부여합니다.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +
@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;
+}
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Fonts', '#font-display-desc', 'font-display')}}{{Spec2('CSS4 Fonts')}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("css.at-rules.font-face.font-display")}}

+ +

See also

+ + 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 +--- +

{{CSSRef}}

+ +

요약(Summary)

+ +

CSS at-rule 인 @font-face 를 사용하여 웹페이지의 텍스트에 온라인폰트(online fonts)를 적용할 수 있다. @font-face 를 사용하여 웹페이지 제작자가 원하는 폰트를 사용할 수 있게함으로써, 컴퓨터에 설치된 폰트만을 사용해야했던 제약이 없어지게되었다. @font-face at-rule 은 CSS의 top-level에서 뿐 아니라, CSS conditional-group at-rule 안에서도 사용될 수도 있다. 

+ +

{{ seeCompatTable() }}

+ +

문법(Syntax)

+ +
@font-face {
+  font-family: <a-remote-font-name>;
+  src: <source> [,<source>]*;
+  [font-weight: <weight>];
+  [font-style: <style>];
+}
+
+ +

속성값(Values)

+ +
+
<a-remote-font-name> 
+
font 속성에서 폰트명(font face)으로 지정될 이름을 설정한다.
+
<source> 
+
원격 폰트(remote font) 파일의 위치를 나타내는 URL 값을 지정하거나, 사용자 컴퓨터에 설치된 폰트명을 local("Font Name")형식으로 지정하는 속성이다.
+
<weight> 
+
폰트의 굵기(font weight) 값.
+
<style> 
+
폰트 스타일(font style) 값.
+
+ +

사용자의 로컬환경(local computer)에 설치된 폰트는 local() 이라는 구문을 사용하여 지정이 가능하다. 만약 해당 폰트를 찾지못한다면, 다른 대체 폰트를 찾을때까지 폰트를 검색작업을 계속 할 것이다.

+ +

예제(Examples)

+ +

아래는 다운로드하여 사용가능한 폰트를 설정하는 간단한 예제이며, document의 전체 body 영역에 폰트가 적용된다.

+ +

View live sample

+ +
<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>
+
+ +

아래 예제에서는 로컬에 설치된 "Helvetica Neue Bold" 폰트가 사용된다. 만약 해당 폰트가 설치되어 있지 않다면(다른 2개의 폰트를 적용하기 위한 시도를 하고), 다운로드 가능한 "MgOpenModernaBold.ttf" 폰트가 대신 사용된다.

+ +
@font-face {
+  font-family: MyHelvetica;
+  src: local("Helvetica Neue Bold"),
+  local("HelveticaNeue-Bold"),
+  url(MgOpenModernaBold.ttf);
+  font-weight: bold;
+}
+
+ +

주의사항(Notes)

+ + + +

명세(Specifications)

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('WOFF1.0', '', 'WOFF font format') }}{{ Spec2('WOFF1.0') }}Font format specification
{{ SpecName('CSS3 Fonts', '#font-face-rule', '@font-face') }}{{ Spec2('CSS3 Fonts') }} 
+ +

브라우저 호환성(Browser compatibility)

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{ CompatGeckoDesktop("1.9.1") }}4.04.010.03.1
WOFF{{ CompatGeckoDesktop("1.9.1") }}6.09.011.105.1
SVG Font{{ CompatNo() }}
+ {{ unimplemented_inline(119490) }}		yes{{ CompatNo() }}yesyes
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MiniOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatGeckoMobile("1.9.1") }}{{ CompatUnknown() }}{{ CompatNo() }}10.0{{ CompatVersionUnknown() }}
WOFF{{ CompatNo() }}{{ CompatGeckoMobile("5.0") }}{{ CompatUnknown() }}{{ CompatNo() }}11.0{{ CompatNo() }}
SVG fonts{{ CompatNo() }}{{ CompatNo() }}
+ {{ unimplemented_inline(119490) }}		{{ CompatUnknown() }}{{ CompatNo() }}10.0{{ CompatVersionUnknown() }}
+
+ +

주의사항(Notes)

+ + + +

참고자료(See also)

+ +
+
+ + -- cgit v1.2.3-54-g00ecf