initial commit

1 files changed, 342 insertions, 0 deletions

diff --git a/files/zh-cn/web/css/font/index.html b/files/zh-cn/web/css/font/index.html
new file mode 100644
index 0000000000..6a5b733707
--- /dev/null
+++ b/files/zh-cn/web/css/font/index.html
@@ -0,0 +1,342 @@
+---
+title: font
+slug: Web/CSS/font
+translation_of: Web/CSS/font
+---
+<p>{{ CSSRef() }}</p>
+
+<h2 id="概述">概述</h2>
+
+<p><code>font</code> 属性可以用来作为 {{ Cssxref("font-style") }}, {{ Cssxref("font-variant") }}, {{ Cssxref("font-weight") }}, {{ Cssxref("font-size") }}, {{ Cssxref("line-height") }} 和 {{ Cssxref("font-family") }} 属性的简写，或将元素的字体设置为系统字体。</p>
+
+<p>{{EmbedInteractiveExample("pages/css/font.html")}}</p>
+
+<div class="hidden">
+<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
+</div>
+
+
+
+<p>与任何简写属性一样，任何未指定的值都将设置为其对应的初始值（可能覆盖先前使用非简写属性设置的值）。 虽然不能通过 font 直接设置，但是{{ cssxref("font-stretch") }}，{{ cssxref("font-size-adjust") }} 和 {{ cssxref("font-kerning") }} 也会重置为初始值。</p>
+
+<h2 id="语法">语法</h2>
+
+<p>可以将<code>font</code>属性指定为单个关键字，它将选择系统字体，或者作为字体相关的属性的简写。</p>
+
+<p><span class="tlid-translation translation" lang="zh-CN"><span title="">如果将</span></span> <code>font</code> <span class="tlid-translation translation" lang="zh-CN"><span title="">指定为系统关键字，则它必须是以下之一：</span></span><code><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/font$edit#caption">caption</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/font$edit#icon">icon</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/font$edit#menu">menu</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/font$edit#message-box">message-box</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/font$edit#small-caption">small-caption</a></code>, <code><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/font$edit#status-bar">status-bar</a></code><span class="tlid-translation translation" lang="zh-CN"><span title="">。</span></span></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>在 CSS 2.1 中 <code>font-variant</code> 只可以是 <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><code>&lt;'font-style'&gt;</code></dt>
+ <dd>见 {{ Cssxref("font-style") }} 属性。</dd>
+ <dt><code>&lt;'font-variant'&gt;</code></dt>
+ <dd>见 {{ Cssxref("font-variant") }} 属性。</dd>
+ <dt><code>&lt;'font-weight'&gt;</code></dt>
+ <dd>见 {{ Cssxref("font-weight") }} 属性。</dd>
+ <dt><code>&lt;'font-size'&gt;</code></dt>
+ <dd>见 {{ Cssxref("font-size") }} 属性。</dd>
+ <dt><code>&lt;'line-height'&gt;</code></dt>
+ <dd>见 {{ cssxref("line-height") }} 属性。</dd>
+ <dt><code>&lt;'font-family'&gt;</code></dt>
+ <dd>见 {{ Cssxref("font-family") }} 属性。</dd>
+ <dt>
+ <h4 id="系统字体">系统字体</h4>
+ </dt>
+ <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>
+ <dt>
+ <h3 id="正式语法">正式语法</h3>
+ </dt>
+</dl>
+
+<pre class="syntaxbox">{{csssyntax("font")}}</pre>
+
+<h2 id="示例">示例</h2>
+
+<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="comment token">/* Set the font size to 12px and the line height to 14px.
+   Set the font family to sans-serif */</span>
+<span class="selector token">p</span> <span class="punctuation token">{</span> <span class="property token">font</span><span class="punctuation token">:</span> <span class="number token">12</span><span class="token unit">px</span>/<span class="number token">14</span><span class="token unit">px</span> sans-serif <span class="punctuation token">}</span>
+
+<span class="comment token">/* Set the font size to 80% of the parent element
+   or default value (if no parent element present).
+   Set the font family to sans-serif */</span>
+<span class="selector token">p</span> <span class="punctuation token">{</span> <span class="property token">font</span><span class="punctuation token">:</span> <span class="number token">80</span><span class="token unit">%</span> sans-serif <span class="punctuation token">}</span>
+
+<span class="comment token">/* Set the font weight to bold,
+   the font-style to italic,
+   the font size to large,
+   and the font family to serif. */</span>
+<span class="selector token">p</span> <span class="punctuation token">{</span> <span class="property token">font</span><span class="punctuation token">:</span> bold italic large serif <span class="punctuation token">}</span>
+
+<span class="comment token">/* Use the same font as the status bar of the window */</span>
+<span class="selector token">p</span> <span class="punctuation token">{</span> <span class="property token">font</span><span class="punctuation token">:</span> status-bar <span class="punctuation token">}</span></code></pre>
+
+<h3 id="live_sample" name="live_sample">实样</h3>
+
+<p id="HTML_Content" style="display: none;">HTML Content</p>
+
+<pre class="brush: html" style="display: none;">&lt;p&gt;
+    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;div class="setPropCont"&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;/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;
+</pre>
+
+<p id="CSS_Content" style="display: none;">CSS Content</p>
+
+<pre class="brush: css" style="display: none;">body, input {
+  font: 14px arial;
+}
+
+.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;
+}</pre>
+
+<p id="JavaScript_Content" style="display: none;">JavaScript Content</p>
+
+<pre class="brush: js" style="display: none;">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('live_sample','100%', '380px') }}</p>
+
+<h2 id="Notes" name="Notes">规范</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('CSS3 Fonts', '#font', 'font') }}</td>
+   <td>{{ Spec2('CSS3 Fonts') }}</td>
+   <td>添加对 <code>font-stretch</code> 的支持</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS2.1', 'fonts.html#font-shorthand', 'font-weight') }}</td>
+   <td>{{ Spec2('CSS2.1') }}</td>
+   <td>添加对关键字的支持</td>
+  </tr>
+  <tr>
+   <td>{{ SpecName('CSS1', '#font', 'font') }}</td>
+   <td>{{ Spec2('CSS1') }}</td>
+   <td>初始定义</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性"><span class="tlid-translation translation" lang="zh-CN"><span title="">浏览器兼容性</span></span></h2>
+
+
+
+<p>{{Compat("css.properties.font")}}</p>