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