font-style

  • Revision slug: Web/CSS/font-style
  • Revision title: font-style
  • Revision id: 396275
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment Moved From CSS/font-style to Web/CSS/font-style

Revision Content

{{CSSRef}}

Summary

The font-style CSS property allows italic or oblique faces to be selected within a {{cssxref("font-family")}}.

{{cssbox("font-style")}}

Syntax

Formal syntax: {{csssyntax("font-style")}}
font-style: normal
font-style: italic
font-style: oblique

font-style: inherit

Values

Italic forms are generally cursive in nature while oblique faces are typically sloped versions of the regular face. Oblique faces can be simulated by artificially sloping the glyphs of the regular face.

normal
Selects a font that is classified as normal within a {{Cssxref("font-family")}}
italic
Selects a font that is labeled italic, if that is not available, one labeled oblique
oblique
Selects a font that is labeled oblique

Example

This paragraph is italic.

This paragraph is oblique.

The above example shows the two font-style values. The CSS looks like this:

p.italic { font-style:italic } 
p.oblique { font-style: oblique }

And the HTML looks like this:

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

Specific​ations

Specification Status Comment
{{SpecName('CSS3 Fonts', '#font-style-prop', 'font-style')}} {{Spec2('CSS3 Fonts')}} No change.
{{SpecName('CSS2.1', 'fonts.html#propdef-font-style', 'font-style')}} {{Spec2('CSS2.1')}} No change.
{{SpecName('CSS1', '#font-style', 'font-style')}}    

Browser compatibility

{{CompatibilityTable}}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 {{CompatGeckoDesktop("1")}} 4.0 7.0 1.0
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 1.0 {{CompatGeckoMobile("1")}} 6.0 6.0 1.0

See also

  • {{CSS_Reference:Fonts}}

Revision Source

<div>
  {{CSSRef}}</div>
<h2 id="Summary">Summary</h2>
<p>The <code>font-style</code> CSS property allows <code>italic</code> or <code>oblique</code> faces to be selected within a {{cssxref("font-family")}}.</p>
<p>{{cssbox("font-style")}}</p>
<h2 id="Syntax">Syntax</h2>
<pre class="twopartsyntaxbox">
<a href="/en-US/docs/CSS/Value_definition_syntax" title="CSS/Value_definition_syntax">Formal syntax</a>: {{csssyntax("font-style")}}
</pre>
<pre>
font-style: normal
font-style: italic
font-style: oblique

font-style: inherit
</pre>
<h3 id="Values">Values</h3>
<p><strong>Italic</strong> forms are generally cursive in nature while <strong>oblique</strong> faces are typically sloped versions of the regular face. Oblique faces can be simulated by artificially sloping the glyphs of the regular face.</p>
<dl>
  <dt>
    normal</dt>
  <dd>
    Selects a font that is classified as <code>normal</code> within a {{Cssxref("font-family")}}</dd>
  <dt>
    italic</dt>
  <dd>
    Selects a font that is labeled <code>italic</code>, if that is not available, one labeled <code>oblique</code></dd>
  <dt>
    oblique</dt>
  <dd>
    Selects a font that is labeled <code>oblique</code></dd>
</dl>
<h2 id="Example">Example</h2>
<p><em>This paragraph is italic.</em></p>
<p style="font-style:oblique;">This paragraph is oblique.</p>
<p>The above example shows the two <code>font-style</code> values. The CSS looks like this:</p>
<pre class="brush: css">
p.italic { font-style:italic } 
p.oblique { font-style: oblique }</pre>
<p>And the HTML&nbsp;looks like this:</p>
<pre class="brush: html">
&lt;p class="italic"&gt;This paragraph is italic.&lt;/p&gt;
&lt;p class="oblique"&gt;This paragraph is oblique.&lt;/p&gt;&nbsp;</pre>
<h2 id="Specific.E2.80.8Bations">Specific​ations</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-style-prop', 'font-style')}}</td>
      <td>{{Spec2('CSS3 Fonts')}}</td>
      <td>No change.</td>
    </tr>
    <tr>
      <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-style', 'font-style')}}</td>
      <td>{{Spec2('CSS2.1')}}</td>
      <td>No change.</td>
    </tr>
    <tr>
      <td>{{SpecName('CSS1', '#font-style', 'font-style')}}</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>1.0</td>
        <td>{{CompatGeckoDesktop("1")}}</td>
        <td>4.0</td>
        <td>7.0</td>
        <td>1.0</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 Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>1.0</td>
        <td>{{CompatGeckoMobile("1")}}</td>
        <td>6.0</td>
        <td>6.0</td>
        <td>1.0</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also">See also</h2>
<ul>
  <li>{{CSS_Reference:Fonts}}</li>
</ul>
Revert to this revision