initial commit

1 files changed, 133 insertions, 0 deletions

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>