initial commit

1 files changed, 368 insertions, 0 deletions

diff --git a/files/zh-cn/web/css/font-weight/index.html b/files/zh-cn/web/css/font-weight/index.html
new file mode 100644
index 0000000000..6400488a40
--- /dev/null
+++ b/files/zh-cn/web/css/font-weight/index.html
@@ -0,0 +1,368 @@
+---
+title: font-weight
+slug: Web/CSS/font-weight
+tags:
+  - CSS
+  - CSS Fonts
+translation_of: Web/CSS/font-weight
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="Summary" name="Summary">概述</h2>
+
+<p> {{Cssxref("font-weight")}} <a href="/en-US/docs/CSS" title="CSS">CSS</a> 属性指定了字体的粗细程度。 一些字体只提供 <code>normal</code> 和 <code>bold</code> 两种值。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/font-weight.html")}}</div>
+
+<pre class="brush:css no-line-numbers">/* Keyword values */
+font-weight: normal;
+font-weight: bold;
+
+/* Keyword values relative to the parent */
+font-weight: lighter;
+font-weight: bolder;
+
+/* Numeric keyword values */
+font-weight: 1
+font-weight: 100;
+font-weight: 100.6;
+font-weight: 123;
+font-weight: 200;
+font-weight: 300;
+font-weight: 321;
+font-weight: 400;
+font-weight: 500;
+font-weight: 600;
+font-weight: 700;
+font-weight: 800;
+font-weight: 900;
+font-weight: 1000;
+
+/* Global values */
+font-weight: inherit;
+font-weight: initial;
+font-weight: unset;
+</pre>
+
+<div class="hidden" id="font-weight">
+<pre class="brush: html">&lt;div class="row"&gt;
+  &lt;ul class="cell"&gt;
+    &lt;li&gt;&lt;em&gt;lighter:&lt;/em&gt; &lt;span class="fwLighter"&gt;The quick brown fox jumps over the lazy dog&lt;/span&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;em&gt; normal:&lt;/em&gt; &lt;span class="fwNormal"&gt;The quick brown fox jumps over the lazy dog&lt;/span&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;em&gt;   bold:&lt;/em&gt; &lt;span class="fwBold"&gt;The quick brown fox jumps over the lazy dog&lt;/span&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;em&gt; bolder:&lt;/em&gt; &lt;span class="fwBolder"&gt;The quick brown fox jumps over the lazy dog&lt;/span&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+
+  &lt;ul class="cell"&gt;
+    &lt;li&gt;&lt;em&gt;    100:&lt;/em&gt; &lt;span class="fw100"&gt;The quick brown fox jumps over the lazy dog&lt;/span&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;em&gt;    200:&lt;/em&gt; &lt;span class="fw200"&gt;The quick brown fox jumps over the lazy dog&lt;/span&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;em&gt;    300:&lt;/em&gt; &lt;span class="fw300"&gt;The quick brown fox jumps over the lazy dog&lt;/span&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;em&gt;    400:&lt;/em&gt; &lt;span class="fw400"&gt;The quick brown fox jumps over the lazy dog&lt;/span&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;em&gt;    500:&lt;/em&gt; &lt;span class="fw500"&gt;The quick brown fox jumps over the lazy dog&lt;/span&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;em&gt;    600:&lt;/em&gt; &lt;span class="fw600"&gt;The quick brown fox jumps over the lazy dog&lt;/span&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;em&gt;    700:&lt;/em&gt; &lt;span class="fw700"&gt;The quick brown fox jumps over the lazy dog&lt;/span&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;em&gt;    800:&lt;/em&gt; &lt;span class="fw800"&gt;The quick brown fox jumps over the lazy dog&lt;/span&gt;&lt;/li&gt;
+    &lt;li&gt;&lt;em&gt;    900:&lt;/em&gt; &lt;span class="fw900"&gt;The quick brown fox jumps over the lazy dog&lt;/span&gt;&lt;/li&gt;
+  &lt;/ul&gt;
+
+  &lt;div class="cell note"&gt;
+    The weight above can vary, depending on the font you are using:
+    &lt;input id="fontName" value="Gill Sans"&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</pre>
+
+<pre class="brush: css">html,body {
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.row {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  background: #EEE;
+  flex-direction: column;
+}
+
+.cell {
+  flex: 1;
+  white-space: nowrap;
+  margin: .5em .5em 0;
+  padding: .5em;
+  background-color: #FFF;
+  font: 1em monospace;
+  overflow: auto;
+}
+
+.note {
+  background: #fff3d4;
+  padding: 1em;
+  margin: 0 .5em .5em;
+  font: .8em sans-serif;
+  text-align: center;
+  white-space: initial;
+  flex: none;
+}
+
+ul {
+  list-style: none;
+}
+
+ul.cell {
+  padding: 1em 2em;
+  font: 1rem/170% "Gill Sans", monospace;
+}
+
+ul.cell:first-child {
+  flex:none;
+}
+
+li em {
+  font-family: monospace;
+  white-space: pre;
+  font-style: normal;
+}
+
+.fwNormal  { font-weight: normal; }
+.fwBold    { font-weight: bold; }
+.fwLighter { font-weight: lighter; }
+.fwBolder  { font-weight: Bolder; }
+.fw100 { font-weight: 100; }
+.fw200 { font-weight: 200; }
+.fw300 { font-weight: 300; }
+.fw400 { font-weight: 400; }
+.fw500 { font-weight: 500; }
+.fw600 { font-weight: 600; }
+.fw700 { font-weight: 700; }
+.fw800 { font-weight: 800; }
+.fw900 { font-weight: 900; }</pre>
+
+<pre class="brush: js">function updateFontFamily() {
+  var fontName   = document.getElementById('fontName').value;
+  var fontFamily = '"' + fontName + '", monospace';
+  var UL = document.querySelectorAll('ul.cell');
+
+  UL[0].style.fontFamily = fontFamily;
+  UL[1].style.fontFamily = fontFamily;
+}
+
+window.addEventListener('load', function () {
+  var INPUT = document.getElementById('fontName');
+  INPUT.addEventListener('change', updateFontFamily);
+  INPUT.addEventListener('input', updateFontFamily);
+});</pre>
+</div>
+
+<p>{{EmbedLiveSample("font-weight", "100%", 500, "", "", "example-outcome-frame")}}</p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="Syntax" name="Syntax">语法</h2>
+
+<h3 id="值">值</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>正常粗细。与<code>400等值。</code></dd>
+ <dt><code>bold</code></dt>
+ <dd> 加粗。 与<code>700等值。</code></dd>
+ <dt><code>lighter</code></dt>
+ <dd>比从父元素继承来的值更细(处在字体可行的粗细值范围内)。</dd>
+ <dt><code>bolder</code></dt>
+ <dd>比从父元素继承来的值更粗 (处在字体可行的粗细值范围内)。</dd>
+ <dt><code>&lt;number&gt;</code></dt>
+ <dd>一个介于 1 和 1000 (包含) 之间的 <a href="/en-US/docs/Web/CSS/number"><code>&lt;number&gt;</code></a> 类型值。更大的数值代表字体重量粗于更小的数值 (或一样粗)。一些常用的数值对应于通用的字体重量名称，如章节<a href="#常见粗细值名称和数值对应">常见粗细值名称和数值对应</a>所描述。</dd>
+</dl>
+
+<h3 id="回退机制">回退机制</h3>
+
+<p>如果指定的权重值不可用，则使用以下规则来确定实际呈现的权重：</p>
+
+<ul>
+ <li>如果指定的权重值在 <code>400</code>和 <code>500</code>之间（包括<code>400</code>和<code>500</code>）：
+
+  <ul>
+   <li>按升序查找指定值与<code>500</code>之间的可用权重；</li>
+   <li>如果未找到匹配项，按<strong>降序</strong>查找小于指定值的可用权重；</li>
+   <li>如果未找到匹配项，按<strong>升序</strong>查找大于<code>500</code>的可用权重。</li>
+  </ul>
+ </li>
+ <li>如果指定值小于<code>400</code>，按<strong>降序</strong>查找小于指定值的可用权重。 如果未找到匹配项，按<strong>升序</strong>查找大于指定值的可用权重（先尽可能的小，再尽可能的大）。</li>
+ <li>如果指定值大于<code>500</code>，按<strong>升序</strong>查找大于指定值的可用权重。 如果未找到匹配项，按<strong>降序</strong>查找小于指定值的可用权重（先尽可能的大，再尽可能的小）。</li>
+</ul>
+
+<p>以上策略意味着，如果一个字体只有 <code>normal</code> 和 <code>bold</code> 两种粗细值选择，指定粗细值为 <code>100-500</code> 时，实际渲染时将使用 <code>normal</code>，指定粗细值为 <code>600-900</code> 时，实际渲染时将使用 <code>bold</code> 。</p>
+
+<h3 id="相对粗细值的解析">相对粗细值的解析</h3>
+
+<p>当指定的是相对粗细值 <code>lighter</code> 或 <code>bolder</code> 时，将使用如下图表来决定元素渲染时的绝对粗细值：</p>
+
+<table>
+ <thead>
+  <tr>
+   <th>继承值（Inherited value）</th>
+   <th><code>bolder</code></th>
+   <th><code>lighter</code></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th>100</th>
+   <td>400</td>
+   <td>100</td>
+  </tr>
+  <tr>
+   <th>200</th>
+   <td>400</td>
+   <td>100</td>
+  </tr>
+  <tr>
+   <th>300</th>
+   <td>400</td>
+   <td>100</td>
+  </tr>
+  <tr>
+   <th>400</th>
+   <td>700</td>
+   <td>100</td>
+  </tr>
+  <tr>
+   <th>500</th>
+   <td>700</td>
+   <td>100</td>
+  </tr>
+  <tr>
+   <th>600</th>
+   <td>900</td>
+   <td>400</td>
+  </tr>
+  <tr>
+   <th>700</th>
+   <td>900</td>
+   <td>400</td>
+  </tr>
+  <tr>
+   <th>800</th>
+   <td>900</td>
+   <td>700</td>
+  </tr>
+  <tr>
+   <th>900</th>
+   <td>900</td>
+   <td>700</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="常见粗细值名称和数值对应">常见粗细值名称和数值对应</h3>
+
+<p>100 到 900 之间的数值大致对应如下的常见粗细值名称：</p>
+
+<dl>
+ <dt><code>100</code></dt>
+ <dd>Thin (Hairline)</dd>
+ <dt><code>200</code></dt>
+ <dd>Extra Light (Ultra Light)</dd>
+ <dt><code>300</code></dt>
+ <dd>Light</dd>
+ <dt><code>400</code></dt>
+ <dd>Normal</dd>
+ <dt><code>500</code></dt>
+ <dd>Medium</dd>
+ <dt><code>600</code></dt>
+ <dd>Semi Bold (Demi Bold)</dd>
+ <dt><code>700</code></dt>
+ <dd>Bold</dd>
+ <dt><code>800</code></dt>
+ <dd>Extra Bold (Ultra Bold)</dd>
+ <dt><code>900</code></dt>
+ <dd>Black (Heavy)</dd>
+</dl>
+
+<h3 id="插值规律">插值规律</h3>
+
+<p><code>font-weight</code> 数值采取离散式定义（使用 100 的整倍数）。数值为实数，非 100 的整数倍的值将被四舍五入转换为 100 的整倍数，遇到 *50 时，将向上转换，如 150 将转换为 200 。</p>
+
+<h3 id="正式的语法">正式的语法</h3>
+
+<pre class="syntaxbox">{{csssyntax("font-weight")}}</pre>
+
+<h2 id="例子">例子</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  Alice was beginning to get very tired of sitting by her sister on the
+  bank, and of having nothing to do: once or twice she had peeped into the
+  book her sister was reading, but it had no pictures or conversations in
+  it, 'and what is the use of a book,' thought Alice 'without pictures or
+  conversations?'
+&lt;/p&gt;
+
+&lt;div&gt;I'm heavy&lt;br/&gt;
+  &lt;span&gt;I'm lighter&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">/* Set paragraph text to be bold. */
+p {
+  font-weight: bold;
+}
+
+/* Set div text to two steps darker than
+   normal but less than a standard bold. */
+div {
+ font-weight: 600;
+}
+
+/* Sets text enclosed within span tag
+   to be one step lighter than the parent. */
+span {
+  font-weight: lighter;
+}</pre>
+
+<h3 id="结果">结果</h3>
+
+<p>{{EmbedLiveSample("Examples","400","300")}}</p>
+
+<h2 id="Notes" name="Notes">规范</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-weight-prop', 'font-weight')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'font-weight')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td>Defines <code>font-weight</code> as animatable.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-weight', 'font-weight')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>No change.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#font-weight', 'font-weight')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2>
+
+<div class="hidden">此页面中的兼容性表格由结构化数据生成。 如果您想为数据做出贡献，请查看<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并向我们发送拉取请求。</div>
+
+<p>{{Compat("css.properties.font-weight")}}</p>