initial commit

5 files changed, 614 insertions, 0 deletions

diff --git a/files/zh-cn/web/css/@font-face/font-display/index.html b/files/zh-cn/web/css/@font-face/font-display/index.html
new file mode 100644
index 0000000000..be69002f0d
--- /dev/null
+++ b/files/zh-cn/web/css/@font-face/font-display/index.html
@@ -0,0 +1,107 @@
+---
+title: font-display
+slug: Web/CSS/@font-face/font-display
+tags:
+  - CSS
+  - 参考
+  - 字体
+translation_of: Web/CSS/@font-face/font-display
+---
+<div>{{CSSRef}}</div>
+
+<p><code>font-display</code> 属性决定了一个<font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">@font-face</span></font> 在不同的下载时间和可用时间下是如何展示的。</p>
+
+<h2 id="字体显示时间轴">字体显示时间轴</h2>
+
+<p>字体显示时间线基于一个计时器，该计时器在用户代理尝试使用给定下载字体的那一刻开始。时间线分为三个时间段，在这三个时间段中指定使用字体的元素的渲染行为。</p>
+
+<dl>
+ <dt>字体阻塞周期</dt>
+ <dd>如果未加载字体，任何试图使用它的元素都必须渲染不可见的后备字体。如果在此期间字体已成功加载，则正常使用它。</dd>
+ <dt>字体交换周期</dt>
+ <dd>如果未加载字体，任何尝试使用它的元素都必须呈现后备字体。如果在此期间字体已成功加载，则正常使用它。</dd>
+ <dt>字体失败周期</dt>
+ <dd>如果未加载字体，用户代理将其视为导致正常字体回退的失败加载。</dd>
+</dl>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="brush: css">/* 关键字值 */
+font-display：auto;
+font-display：block;
+font-display：swap;
+font-display：fallback;
+font-display：optional;</pre>
+
+<h3 id="属性值">属性值</h3>
+
+<dl>
+ <dt><code>auto</code></dt>
+ <dd>字体显示策略由用户代理定义。</dd>
+ <dt><code>block</code></dt>
+ <dd>为字体提供一个短暂的阻塞周期和无限的交换周期。</dd>
+ <dt><code>swap</code></dt>
+ <dd>为字体提供一个非常小的阻塞周期和无限的交换周期。</dd>
+ <dt><code>fallback</code></dt>
+ <dd>为字体提供一个非常小的阻塞周期和短暂的交换周期。</dd>
+ <dt><code>optional</code></dt>
+ <dd>为字体提供一个非常小的阻塞周期，并且没有交换周期。</dd>
+</dl>
+
+<h3 id="形式化语法">形式化语法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="例子">例子</h2>
+
+<pre class="brush: css">@ 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="规范">规范</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">规范</th>
+   <th scope="col">状态</th>
+   <th scope="col">备注</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Fonts', '#font-display-desc', 'font-display')}}</td>
+   <td>{{Spec2('CSS4 Fonts')}}</td>
+   <td>初始定义</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<div class="hidden">
+<p>此页面上的兼容性表格由结构化数据生成。如果您想为数据做出贡献，请查看<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>并向我们​​发送拉取请求。</p>
+</div>
+
+<p>{{Compat("css.at-rules.font-face.font-display")}}</p>
+
+<h2 id="参见">参见</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/zh-cn/web/css/@font-face/font-family/index.html b/files/zh-cn/web/css/@font-face/font-family/index.html
new file mode 100644
index 0000000000..1002d02fb4
--- /dev/null
+++ b/files/zh-cn/web/css/@font-face/font-family/index.html
@@ -0,0 +1,114 @@
+---
+title: font-family
+slug: Web/CSS/@font-face/font-family
+translation_of: Web/CSS/@font-face/font-family
+---
+<div>{{CSSRef}}</div>
+
+<div><strong><code>font-family</code></strong><code>属性允许我们为页面上的字体指定一个由</code>{{cssxref("@font-face")}} 规则定义的字体族</div>
+
+<p>The <strong><code>font-family</code></strong> CSS descriptor allows authors to specify the font family for the font specified in an {{cssxref("@font-face")}} rule.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="brush: css">/* &lt;string&gt; values */
+font-family: "font family";
+font-family: 'another font family';
+
+/* &lt;IDENT&gt; value */
+font-family: examplefont;
+</pre>
+
+<h3 id="取值">取值</h3>
+
+<dl>
+ <dt><code>&lt;family-name&gt;</code></dt>
+ <dd>指定字体族名称</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="示例">示例</h2>
+
+<pre class="brush: css">@font-face {
+  font-family: examplefont;
+  src: url('examplefont.ttf');
+}
+</pre>
+
+<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-family-desc', 'font-family')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Edge</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome("4")}}</td>
+   <td>12.0</td>
+   <td>{{CompatGeckoDesktop("1.9.1")}}</td>
+   <td>{{CompatIE("6.0")}}</td>
+   <td>{{CompatOpera("9.0")}}</td>
+   <td>{{CompatSafari("3.1")}}</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>{{CompatAndroid("2.2")}}</td>
+   <td>{{CompatGeckoMobile("1.9.1")}}</td>
+   <td>{{CompatIE("10.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatOpera("12.0")}}</td>
+   <td>{{CompatSafari("3.1")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/zh-cn/web/css/@font-face/font-style/index.html b/files/zh-cn/web/css/@font-face/font-style/index.html
new file mode 100644
index 0000000000..a8c5e39654
--- /dev/null
+++ b/files/zh-cn/web/css/@font-face/font-style/index.html
@@ -0,0 +1,133 @@
+---
+title: font-style
+slug: Web/CSS/@font-face/font-style
+translation_of: Web/CSS/@font-face/font-style
+---
+<p>{{CSSRef}}</p>
+
+<h2 id="概述">概述</h2>
+
+<p><strong>font-style</strong> 描述符允许开发者在@font-rule规则中为指定字体样式(该条目区别于font-style，意指用在@font-rule中的font-style属性)</p>
+
+<p>For a particular font family, authors can download various font faces which correspond to the different styles of the same font family, and then use the <code>font-style </code>descriptor to explicitly specify the font face's style. The values for the CSS descriptor is same as that of its corresponding font property.</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<div class="syntaxbox">
+<pre class="brush: css">font-style: normal;
+font-style: italic;
+font-style: oblique;</pre>
+
+<h3 id="Values">Values</h3>
+
+<p><code><strong>normal</strong></code><br>
+ Selects the normal version of the font-family.</p>
+
+<p><strong><code>italic</code></strong><br>
+ Specifies that font-face is an italicized version of the normal font .</p>
+
+<p><strong><code>oblique</code></strong><br>
+ Specifies that the font-face is an artificially sloped version of the normal font.</p>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<p>As an example, consider the garamond font family, in its normal form, we get the following result:</p>
+
+<pre class="brush: css">@font-face {
+  font-family: garamond;
+  src: url('garamond.ttf');
+}</pre>
+
+<p><img alt="unstyled Garamond" src="https://mdn.mozillademos.org/files/12265/garamondunstyled.JPG" style="height: 101px; width: 276px;"></p>
+
+<p>The italicized version of this text uses the same glyphs present in the unstyled version, but they are artificially sloped by a few degrees.</p>
+
+<p><img alt="artificially sloped garamond" src="https://mdn.mozillademos.org/files/12267/garamondartificialstyle.JPG" style="height: 101px; width: 276px;"></p>
+
+<p>On the other hand, if a true italicized version of the font family exists, we can include it in the <code>src </code>descriptor and specify the font style as italic, so that it is clear that the font is italicized. True italics use different glyphs and are a bit different from their upright counterparts, having some unique features and generally have a rounded and calligraphic quality. These fonts are specially created by font designers and are <strong>not</strong> artificially sloped.</p>
+
+<pre class="brush: css">@font-face {
+  font-family: garamond;
+  src: url('garamond-italic.ttf');
+  font-style: italic;
+}</pre>
+
+<p><img alt="italic garamond" src="https://mdn.mozillademos.org/files/12269/garamonditalic.JPG" style="height: 101px; width: 267px;"></p>
+
+<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('CSS3 Fonts', '#descdef-font-face-unicode-range', 'unicode-range')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table" style="height: 91px; width: 591px;">
+ <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>
+ </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>
+ </tbody>
+</table>
+</div>
+</div>
diff --git a/files/zh-cn/web/css/@font-face/index.html b/files/zh-cn/web/css/@font-face/index.html
new file mode 100644
index 0000000000..1f5430e318
--- /dev/null
+++ b/files/zh-cn/web/css/@font-face/index.html
@@ -0,0 +1,178 @@
+---
+title: '@font-face'
+slug: Web/CSS/@font-face
+tags:
+  - '@规则'
+  - 字体
+translation_of: Web/CSS/@font-face
+---
+<div>{{CSSRef}}</div>
+
+<div>@font-face CSS at-rule 指定一个用于显示文本的自定义字体；字体能从远程服务器或者用户本地安装的字体加载. 如果提供了local()函数，从用户本地查找指定的字体名称，并且找到了一个匹配项, 本地字体就会被使用. 否则, 字体就会使用url()函数下载的资源。</div>
+
+<div></div>
+
+<div>通过允许作者提供他们自己的字体，@font-face 让设计内容成为了一种可能，同时并不会被所谓的"网络-安全"字体所限制(字体如此普遍以至于它们能被广泛的使用). 指定查找和使用本地安装的字体名称可以让字体的自定义化程度超过基本字体，同时在不依赖网络情况下实现此功能。</div>
+
+<div></div>
+
+<div>在同时使用url()和local()功能时，为了用户已经安装的字体副本在需要使用时被使用，如果在用户本地没有找到字体副本就会去使用户下载的副本查找字体。</div>
+
+<div></div>
+
+<div>@font-face 规则不仅仅使用在CSS的顶层，还可以用在任何CSS条件组规则中.</div>
+
+<div></div>
+
+<pre class="brush: css no-line-numbers notranslate">@font-face {
+  font-family: "Open Sans";
+  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
+       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
+}</pre>
+
+<h2 id="概述">概述</h2>
+
+<p>这是一个叫做<code>@font-face</code> 的<a href="/zh-CN/docs/CSS" title="CSS">CSS</a> <a href="/zh-CN/docs/CSS/At-rule" title="At-rule">@规则</a> ，它允许网页开发者为其网页指定在线字体。 通过这种作者自备字体的方式，<code>@font-face</code> 可以消除对用户电脑字体的依赖。 <code>@font-face</code> 不仅可以放在在CSS的最顶层, 也可以放在 @规则 的 <a href="/zh-CN/docs/CSS/At-rule#Conditional_Group_Rules" title="CSS/At-rule#Conditional_Group_Rules">条件规则组</a> 中。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="notranslate">{{csssyntax}}</pre>
+
+<h3 id="取值">取值</h3>
+
+<dl>
+ <dt>{{cssxref("@font-face/font-family", "font-family")}}</dt>
+ <dd>所指定的字体名字将会被用于font或font-family属性( i.e. font-family: &lt;family-name&gt;; )</dd>
+ <dt>{{cssxref("@font-face/src", "src")}}</dt>
+ <dd>远程字体文件位置的URL或者用户计算机上的字体名称， 可以使用local语法通过名称指定用户的本地计算机上的字体( i.e. src: local('Arial'); )。 如果找不到该字体，将会尝试其他来源，直到找到它。</dd>
+ <dt>{{cssxref("@font-face/font-variant", "font-variant")}}</dt>
+ <dd>A {{cssxref("font-variant")}} value.</dd>
+ <dt>{{cssxref("@font-face/font-stretch", "font-stretch")}}</dt>
+ <dd>A {{cssxref("font-stretch")}} value.</dd>
+ <dt>{{cssxref("@font-face/font-weight", "font-weight")}}</dt>
+ <dd>A {{cssxref("font-weight")}} value.</dd>
+ <dt>{{cssxref("@font-face/font-style", "font-style")}}</dt>
+ <dd>对于src所指字体的描述。如果所需字体符合描述，则采用本font-face所定义的字体。</dd>
+ <dt>{{cssxref("@font-face/unicode-range", "unicode-range")}}</dt>
+ <dd>在该@font-face中定义的unicode字体范围</dd>
+</dl>
+
+<h2 id="示例">示例</h2>
+
+<p>下面的例子简单定义了一个可下载的字体，并应用到了文档的整个body标签上。</p>
+
+<p><a href="/@api/deki/files/2935/=webfont-sample.html" title="/@api/deki/files/2935/=webfont-sample.html">View live sample</a></p>
+
+<pre class="notranslate">&lt;html&gt;
+&lt;head&gt;
+  &lt;title&gt;Web Font Sample&lt;/title&gt;
+  &lt;style type="text/css" media="screen, print"&gt;
+    @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 }
+  &lt;/style&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  This is Bitstream Vera Serif Bold.
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+
+
+<p>在接下来的例子中，用到了用户本地字体"Helvetica Neue Bold"的备份；如果当前用户(浏览器)未安装该字体(两种可能的字体名都已经试过)，就会用下载的字体"MgOpenModernaBold.ttf"来代替：</p>
+
+<pre class="brush: css notranslate">@font-face {
+  font-family: MyHelvetica;
+  src: local("Helvetica Neue Bold"),
+  local("HelveticaNeue-Bold"),
+  url(MgOpenModernaBold.ttf);
+  font-weight: bold;
+}
+</pre>
+
+
+
+<div class="note">
+<p>接下来的例子在英文原文中已被删除。</p>
+</div>
+
+<p>这个例子新定义了一个字体，正常粗细的字采用字体Times New Roman，粗体字采用Consolas。</p>
+
+<pre class="brush:css notranslate">@font-face {
+    font-family: myFirstFont;
+    src: local("Times New Roman");
+    font-weight:normal;
+}
+
+@font-face {
+    font-family: myFirstFont;
+    src: local(Consolas);
+    font-weight:bold;
+}
+</pre>
+
+<h2 id="注意">注意</h2>
+
+<ul>
+ <li>这里使用的Web fonts 仍然受到同域限制  (字体文件必须和调用它的网页同一域), 但可以使用 <a href="https://developer.mozilla.org/en-US/docs/HTTP_access_control">HTTP access controls</a> 解除这一限制。</li>
+ <li>因为这里没有为 TrueType(ttf), OpenType(otf) 和 Web Open File Format(WOFF) 字体定义MIME，因此不能为这些字体类型设置特定的MIME（实际上WOFF的MIME将会是application/font-woff，但浏览器对此MIME的识别还不统一，其它字体情况也类似，可暂时使用application/octet-stream）。 </li>
+ <li>你不能在一个 CSS 选择器中定义 @font-face 。例如，这样写是无效的：
+  <pre class="brush: css; example-bad notranslate">.className {
+  @font-face {
+    font-family: MyHelvetica;
+    src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
+        url(MgOpenModernaBold.ttf);
+    font-weight: bold;
+  }
+}</pre>
+ </li>
+</ul>
+
+<h2 id="规范">规范</h2>
+
+<table>
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('WOFF2.0', '', 'WOFF2 font format')}}</td>
+   <td>{{Spec2('WOFF2.0')}}</td>
+   <td>Font format specification with new compression algorithm</td>
+  </tr>
+  <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>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+<p>{{Compat("css.at-rules.font-face")}}</p>
+
+<h2 id="参考">参考</h2>
+
+<ul>
+ <li><a href="/en-US/docs/WOFF" title="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>
diff --git a/files/zh-cn/web/css/@font-face/src/index.html b/files/zh-cn/web/css/@font-face/src/index.html
new file mode 100644
index 0000000000..e209486348
--- /dev/null
+++ b/files/zh-cn/web/css/@font-face/src/index.html
@@ -0,0 +1,82 @@
+---
+title: src
+slug: Web/CSS/@font-face/src
+translation_of: Web/CSS/@font-face/src
+---
+<div>{{CSSRef}}</div>
+
+<p>{{cssxref("@font-face")}} 中的src描述符指定了包含字体数据的资源。<code>@font-face</code> 规则中需要指定这个属性。</p>
+
+<p>它的值是一个有优先级的，以逗号分割的外部引用或者本地安装的字体名称。当需要使用字体时，用户代理（指浏览器的意思）将会使用以逗号分隔的参考集中能成功激活的第一个参考值。如果是包含无效数据的字体或者本地的字体资源不存在，用户代理将会忽略当前字体并且加载下一个字体。</p>
+
+<p>与CSS中的其他URL一样，URL可以是相对的，在这种情况下，它相对于包含@ font-face规则的样式表的位置进行解析。对于SVG字体，URL指向文档中定义的包含SVG字体的元素。如果省略元素引用，则默认引用第一个定义字体。同样，字体容器只加载<code>@font-face</code> 规则给定的其中一种字体。片段标识符用于指示要加载的字体。如果容器格式缺少定义的片段标识符方案，将会使用一个简单的基于1的索引方案（e.g., "font-collection#1" for the first font, "font-collection#2" for the second font, etc.）</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush: css">/* &lt;url&gt; values */
+src: url(https://somewebsite.com/path/to/font.woff); /* Absolute URL */
+src: url(path/to/font.woff);                         /* Relative URL */
+src: url(path/to/font.woff) format("woff");          /* Explicit format */
+src: url('path/to/font.woff');                       /* Quoted URL */
+src: url(path/to/svgfont.svg#example);               /* Fragment identifying font */
+
+/* &lt;font-face-name&gt; values */
+src: local(font);      /* Unquoted name */
+src: local(some font); /* Name containing space */
+src: local("font");    /* Quoted name */
+
+/* Multiple items */
+src: local(font), url(path/to/font.svg) format("svg"),
+     url(path/to/font.woff) format("woff"),
+     url(path/to/font.otf) format("opentype");
+</pre>
+
+<h3 id="Values">Values</h3>
+
+<dl>
+ <dt><code>&lt;url&gt; [ format( &lt;string&gt;# ) ]?</code></dt>
+ <dd>Specifies an external reference consisting of a {{cssxref("&lt;url&gt;")}}, followed by an optional hint using the <a id="format()" name="format()"><code>format()</code></a> function to describe the format of the font resource referenced by that URL. The format hint contains a comma-separated list of format strings that denote well-known font formats. If a user agent doesn't support the specified formats, it skips downloading the font resource. If no format hints are supplied, the font resource is always downloaded.</dd>
+ <dt><code>&lt;font-face-name&gt;</code></dt>
+ <dd>Specifies the name of a locally-installed font face using the <a id="local()" name="local()"><code>local()</code></a> function, which uniquely identifies a single font face within a larger family. The name can optionally be enclosed in quotes.</dd>
+</dl>
+
+<h3 id="Formal_syntax">Formal syntax</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples">Examples</h2>
+
+<pre class="brush: css">@font-face {
+  font-family: examplefont;
+  src: local(Example Font),
+       url('examplefont.woff') format("woff"),
+       url('examplefont.otf') format("opentype");
+}
+</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('CSS3 Fonts', '#src-desc', 'src')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("css.at-rules.font-face.src")}}</p>