path: root/files/zh-cn/web/css/font-style/index.html

---
title: font-style
slug: Web/CSS/font-style
tags:
  - CSS
  - CSS 字体
  - Web
  - 参考
  - 字体
translation_of: Web/CSS/font-style
---
<div>{{CSSRef}}</div>

<p><strong><code>font-style</code></strong> CSS 属性允许你选择 {{cssxref("font-family")}} 字体下的 <code>italic</code> 或 <code>oblique</code> 样式。</p>

<div>{{EmbedInteractiveExample("pages/css/font-style.html")}}</div>



<p><strong>Italic</strong> 样式一般是指书写体，相比无样式的字体，通常会占用较少的高度，而 <strong>oblique</strong> 字形一般只是常规字形的倾斜版本。斜体（italic） 和倾斜体（oblique）都是通过人工倾斜常规字体的字形来模拟的（使用 {{cssxref("font-synthesis")}} 对此进行控制）。</p>

<p><strong>Italic</strong> font faces are generally cursive in nature, usually using less horizontal space than their unstyled counterparts, while <strong>oblique</strong> faces are usually just sloped versions of the regular face. When the specified style is not available, both italic and oblique faces are simulated by artificially sloping the glyphs of the regular face (use {{cssxref("font-synthesis")}} to control this behavior).</p>

<h2 id="语法">语法</h2>

<pre class="brush:css no-line-numbers">font-style: normal;
font-style: italic;
font-style: oblique;
font-style: oblique 10deg;

/* Global values */
font-style: inherit;
font-style: initial;
font-style: unset;
</pre>

<p><code>font-style</code> 属性被指定为从下面的取值列表中的单独一个关键字，如果关键字是 <code>oblique</code>，则可附加一个可选的角度。</p>

<h3 id="值">值</h3>

<dl>
 <dt><code>normal</code></dt>
 <dd>选择 {{Cssxref("font-family")}} 的常规字体。</dd>
 <dt><code>italic</code></dt>
 <dd>选择斜体，如果当前字体没有可用的斜体版本，会选用倾斜体（<code>oblique</code> ）替代。</dd>
 <dt><code>oblique</code></dt>
 <dd>选择倾斜体，如果当前字体没有可用的倾斜体版本，会选用斜体（<code>italic</code> ）替代。 If one or more oblique faces are available in the chosen font family, the one that most closely matches the specified angle is chosen. If no oblique faces are available, the browser will synthesize an oblique version of the font by slanting a normal face by the specified amount. Valid values are degree values of <code>-90deg</code> to <code>90deg</code> inclusive. If an angle is not specified, an angle of 14 degrees is used. Positive values are slanted to the end of the line, while negative values are slanted towards the beginning.<br>
 <br>
 In general, for a requested angle of 14 degrees or greater, larger angles are prefered; otherwise, smaller angles are preferred (see the spec's <a href="https://drafts.csswg.org/css-fonts-4/#font-matching-algorithm">font matching section</a> for the precise algorithm).</dd>
</dl>

<h3 id="可变字体">可变字体</h3>

<p>可变字体（Variable font）可以精确控制 oblique 字体的倾斜程度。You can select this using the <code>&lt;angle&gt;</code> modifier for the <code>oblique</code> keyword.</p>

<p>For TrueType or OpenType variable fonts, the <code>"slnt"</code> variation is used to implement varying slant angles for oblique, and the <code>"ital"</code> variation with a value of 1 is used to implement italic values. See {{cssxref("font-variation-settings")}}.</p>

<p>For the example below to work, you'll need a browser that supports the CSS Fonts Level 4 syntax in which <code>font-style: oblique</code> can accept an <code>&lt;angle&gt;</code>.</p>

<div style="border: 10px solid #f5f9fa; padding: 1rem;">{{EmbedLiveSample("variable-font-example", 1200, 180, "", "", "example-outcome-frame")}}</div>

<h4 id="HTML">HTML</h4>

<div id="variable-font-example">
<pre class="brush: html">&lt;header&gt;
    &lt;input type="range" id="slant" name="slant" min="-90" max="90" /&gt;
    &lt;label for="slant"&gt;Slant&lt;/label&gt;
&lt;/header&gt;
&lt;div class="container"&gt;
    &lt;p class="sample"&gt;...it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.&lt;/p&gt;
&lt;/div&gt;
</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css">/*
AmstelvarAlpha-VF 由 <span class="col-11 mr-2 text-gray-dark">David Berlow</span> 制作：https://github.com/TypeNetwork/Amstelvar
在此使用时，遵循此开源协议：
https://github.com/TypeNetwork/Amstelvar/blob/master/OFL.txt
*/

@font-face {
  src: url('https://mdn.mozillademos.org/files/16044/AmstelvarAlpha-VF.ttf');
  font-family:'AmstelvarAlpha';
  font-style: normal;
}

label {
  font: 1rem monospace;
}

.container {
  max-height: 150px;
  overflow: scroll;
}

.sample {
  font: 2rem 'AmstelvarAlpha', sans-serif;
}

</pre>

<div class="hidden">
<pre class="brush: css">html, body {
  max-height: 100vh;
  max-width: 100vw;
  overflow: hidden;
}

body {
  display: flex;
  flex-direction: column;
}

header {
  margin-bottom: 1.5rem;
}

.container {
  flex-grow: 1;
}

.container &gt; p {
  margin-top: 0;
  margin-bottom: 0;
}
</pre>
</div>

<h4 id="JavaScript">JavaScript</h4>

<pre class="brush: js">let slantLabel = document.querySelector('label[for="slant"]');
let slantInput = document.querySelector('#slant');
let sampleText = document.querySelector('.sample');

function update() {
  let slant = `oblique ${slantInput.value}deg`;
  slantLabel.textContent = `font-style: ${slant};`;
  sampleText.style.fontStyle = slant;
}

slantInput.addEventListener('input', update);

update();
</pre>
</div>

<h3 id="形式化语法">形式化语法</h3>

{{csssyntax}}

<h2 id="示例">示例</h2>

<p>示例展示了不同的 <code>font-style</code> 值。CSS 看起来像这样：</p>

<div class="hidden">
<pre class="brush: html">&lt;p class="normal"&gt;This paragraph is normal.&lt;/p&gt;
&lt;p class="italic"&gt;This paragraph is italic.&lt;/p&gt;
&lt;p class="oblique"&gt;This paragraph is oblique.&lt;/p&gt;
</pre>
</div>

<pre class="brush: css">.normal {
  font-style: normal;
}

.italic {
  font-style: italic;
}

.oblique {
  font-style: oblique;
}</pre>

<p>{{ EmbedLiveSample('Font_styles') }}</p>

<p>请注意，不是所有的字体都有确切的 <code>oblique</code> 和 <code>italic</code> 字形，即便如此，浏览器也会通过使用现有的字形来模拟所缺少的字形。下面是一个使用这两种字形渲染字体的示例：</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/12049/Screen%20Shot%202015-12-05%20at%2008.41.03.png" style="height: 135px; width: 466px;"></p>

<h2 id="可访问性问题">可访问性问题</h2>

<p>Large sections of text set with a <code>font-style</code> value of <code>italic</code> may be difficult for people with cognitive concerns such as Dyslexia to read.</p>

<ul>
 <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li>
 <li><a href="https://www.w3.org/TR/WCAG21/#visual-presentation">W3C Understanding WCAG 2.1</a></li>
</ul>

<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-style-prop', 'font-style')}}</td>
   <td>{{Spec2('CSS4 Fonts')}}</td>
   <td>Adds the ability to specify an angle after <code>oblique</code></td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Fonts', '#font-style-prop', 'font-style')}}</td>
   <td>{{Spec2('CSS3 Fonts')}}</td>
   <td>没有变化</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-style', 'font-style')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>没有变化</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#font-style', 'font-style')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>初始定义</td>
  </tr>
 </tbody>
</table>

<p>{{cssinfo}}</p>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>

<p>{{Compat("css.properties.font-style")}}</p>

<p>[1] 在 Firefox 44 之前，Gecko 并不对 <code>oblique</code> 和 <code>italic</code> 字形做出区分。在那之后，如果有可用的字形，它将使用正确的字形。</p>