font-style

设置或检索对象中的文本字体样式

示例

font-style: normal;
font-style: italic;
font-style: oblique;
font-style: oblique 10deg;

/* global values */
font-style: inherit;
font-style: initial;
font-style: unset;

浏览器支持


浏览器都支持`font-style`

语法:

font-style:normal| italic| oblique| inherit

设置或检索对象中的文本字体样式。

默认值	normal
适用于	所有元素
继承性	有
动画性	否
计算值	指定值

取值:

normal:指定文本字体样式为正常的字体
italic:指定文本字体样式为斜体。对于没有设计斜体的特殊字体，如果要使用斜体外观将应用oblique
oblique:指定文本字体样式为倾斜的字体。人为的使文字倾斜，而不是去选取字体中的斜体字
inherit:规定应该从父元素继承字体样式

font-styleCSS 属性允许你选择font-family字体下的italic或oblique样式。

italic与oblique区别

italic 样式一般是指书写体，相比无样式的字体，通常会占用较少的高度，而 oblique 字形一般只是常规字形的倾斜版本。斜体（italic）和倾斜体（oblique）都是通过人工倾斜常规字体的字形来模拟的（使用 font-synthesis 对此进行控制）。
斜体在本质上通常是草书，通常比未样式的对等体使用更少的水平空间，而斜体通常只是常规面的倾斜版本。如果指定的样式不可用，则通过人为地倾斜常规面部的字形（用于font-synthesis控制此行为）来模拟斜体和斜面部。

font-synthesis

font-synthesis CSS 属性控制浏览器可以合成（synthesize）哪些缺失的字体，粗体或斜体。

font-synthesis: weight style;
font-synthesis: none;
font-synthesis: weight;
font-synthesis: style;

大多数标准西方字体包含斜体和粗体变体，但许多新颖（novelty）的字体不包括这些。用于中文、日文、韩文和其他语标文字（logographic script）的字体往往不含这些变体，同时，从默认字体中生成、合成这些变体可能会妨碍文本的易读性。在这些情况下，可能最好关闭浏览器默认的 font-synthesis 字体合成特性。

可变字体

可变字体（Variable font）可以精确控制 oblique 字体的倾斜程度。你可以选择使用angle属性（角度）来设置。对于TrueType或OpenType可变字体，"slnt"变体用于实现倾斜的倾斜角度，而"ital"值1 的变体用于实现斜体值。请参阅font-variation-settings。为了使以下示例正常工作，您需要一个支持CSS Fonts Level 4语法的浏览器，该语法font-style: oblique可以接受angle。

实例

//html
<header>
    <input type="range" id="slant" name="slant" min="-90" max="90" />
    <label for="slant">slant</label>
</header>
<div class="container">
    <p class="sample">...it would not be wonderful to meet a megalosaurus, forty feet long or so, waddling like an elephantine lizard up holborn hill.</p>
</div>

//CSS
/*amstelvaralpha-vf 由 david berlow 制作：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;
}

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 > p {
  margin-top: 0;
  margin-bottom: 0;
}

JavaScript

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();

<p class="normal">this paragraph is normal.</p>
<p class="italic">this paragraph is italic.</p>
<p class="oblique">this paragraph is oblique.</p>

//CSS
.normal {font-style: normal;}
.italic { font-style: italic;}
.oblique { font-style: oblique;}

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