font-style

在此页

句法
可访问性关注
形式定义
形式句法
范例
规范
浏览器兼容性
相关话题

font-style CSS property sets whether a font should be styled with a normal, italic, or oblique face from its font-family .

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 https://github.com/mdn/interactive-examples and send us a pull request.

Italic font faces are generally cursive in nature, usually using less horizontal space than their unstyled counterparts, while oblique 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 font-synthesis to control this behavior).

句法

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 property is specified as a single keyword chosen from the list of values below, which can optionally include an angle if the keyword is oblique .

值

normal: Selects a font that is classified as normal 在 font-family .
italic: Selects a font that is classified as italic . If no italic version of the face is available, one classified as oblique is used instead. If neither is available, the style is artificially simulated.
oblique: Selects a font that is classified as oblique . If no oblique version of the face is available, one classified as italic is used instead. If neither is available, the style is artificially simulated.
oblique <angle>: Selects a font classified as oblique , and additionally specifies an angle for the slant of the text. 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 -90deg to 90deg 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.

In general, for a requested angle of 14 degrees or greater, larger angles are prefered; otherwise, smaller angles are preferred (see the spec's font matching section for the precise algorithm).

变量字体

Variable fonts can offer a fine control over the degree to which an oblique face is slanted. You can select this using the <angle> modifier for the oblique 关键词。

For TrueType or OpenType variable fonts, the "slnt" variation is used to implement varying slant angles for oblique, and the "ital" variation with a value of 1 is used to implement italic values. See font-variation-settings .

For the example below to work, you'll need a browser that supports the CSS Fonts Level 4 syntax in which font-style: oblique can accept an <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 is created by David Berlow (https://github.com/TypeNetwork/Amstelvar)
and is used here under the terms of its license:
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();

可访问性关注

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

形式定义

初始值	`normal`
适用于	所有元素。它还适用于 `::first-letter` and `::first-line` .
继承	yes
计算值	如指定
动画类型	discrete

形式句法

normal | italic | oblique <angle>?

范例

Font styles

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

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

规范

规范	状态	注释
CSS Fonts Module Level 4 The definition of 'font-style' in that specification.	工作草案	Adds the ability to specify an angle after `oblique`
CSS Fonts Module Level 3 The definition of 'font-style' in that specification.	候选推荐	无变化
CSS Level 2 (Revision 1) The definition of 'font-style' in that specification.	推荐	无变化
CSS Level 1 The definition of 'font-style' in that specification.	推荐	初始定义

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`font-style`	Chrome 完整支持 1	Edge 完整支持 12	Firefox 完整支持 1 注意事项完整支持 1 注意事项注意事项 Before Firefox 44, `oblique` was not distinguished from `italic` .	IE 完整支持 4	Opera 完整支持 7	Safari 完整支持 1	WebView Android 完整支持 1	Chrome Android 完整支持 18	Firefox Android 完整支持 4 注意事项完整支持 4 注意事项注意事项 Before Firefox 44, `oblique` was not distinguished from `italic` .	Opera Android 完整支持 10.1	Safari iOS 完整支持 1	Samsung Internet Android 完整支持 1.0
`oblique` can accept an `<angle>`	Chrome 不支持 No	Edge 不支持 No	Firefox 完整支持 61	IE 不支持 No	Opera 不支持 No	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 完整支持 61	Opera Android 不支持 No	Safari iOS 不支持 No	Samsung Internet Android 不支持 No

图例

完整支持
不支持
见实现注意事项。

元数据

最后修改： 2020 年 7 月 17 日

CSS
CSS 参考
CSS 字体
指南
1. OpenType font features guide
2. Variable fonts guide
At-Rules
1. @font-face
2. @font-feature-values
特性

在此页

句法

值