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

---
title: font-style
slug: Web/CSS/font-style
translation_of: Web/CSS/font-style
---
<div>{{CSSRef}}</div>

<p><span class="seoSummary">Die CSS-Eigenschaft<strong> <code>font-style</code></strong> legt fest, ob Text mit einem kursiven Schnitt der gewählten Schriftfamilie ({{cssxref("font-family")}}) dargestellt werden soll.</span></p>

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



<h2 id="Syntax">Syntax</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> akzeptiert ein einzelnes der nachfolgenden Schlüsselwörter, welchem im Falle von <code>oblique</code> ein Winkel folgen darf.</p>

<h3 id="Werte">Werte</h3>

<dl>
 <dt><code>normal</code></dt>
 <dd>Wählt einen Schriftschnitt mit nicht-kursiven Buchstaben.</dd>
 <dt><code>italic</code></dt>
 <dd>Wählt einen kursiven Schriftschnitt der Eigenschaft italic (siehe unten). Steht keiner zur Verfügung, wird stattdessen der Wert <code>oblique</code> angewendet. Ist auch dies nicht möglich, wird die Schrägstellung von 14° durch den Browser erzeugt.</dd>
 <dt><code>oblique</code></dt>
 <dd>Wählt einen kursiven Schriftschnitt der Eigenschaft oblique (siehe unten). Steht keiner zur Verfügung, wird stattdessen der Wert <code>italic</code> angewendet. Ist auch dies nicht möglich, wird eine Schrägstellung von 14° durch den Browser erzeugt.</dd>
 <dt><code>oblique</code> <code><a href="/en-US/docs/Web/CSS/angle">&lt;angle&gt;</a></code></dt>
 <dd>Wählt einen kursiven Schriftschnitt der Eigenschaft oblique (siehe unten), dessen Buchstaben genau oder annähernd im Winkel <code>&lt;angle&gt;</code> schräggestellt sind. Üblicherweise werden bei der Suche nach passenden Schriftschnitten für Winkel ab 14° eher größere Werte gewählt, bis 13° eher kleinere (Details siehe <a href="https://drafts.csswg.org/css-fonts-4/#font-matching-algorithm">font matching section</a>).</dd>
 <dd>Steht kein passender Schriftschnitt zur Verfügung, wird die Schrägstellung durch den Computer aus einem normalen Schriftschnitt erzeugt.</dd>
 <dd>Der gültige Winkelbereich erstreckt sich von <code>-90deg</code> bis <code>90deg</code> (einschließlich). Positive Werte bewirken eine Schrägstellung in Richtung Zeilenende, negative in Richtung Zeilenanfang.</dd>
</dl>

<h4 id="italic_gegenüber_oblique">italic gegenüber oblique</h4>

<p>Die Werte <code>italic</code> und <code>oblique</code> scheinen auf den ersten Blick bei der Darstellung oftmals zu identischen Ergebnissen zu führen.</p>

<p>Während <code>italic</code> jedoch Schriftschnitte bezeichnet, die bereits kursiv entworfen wurden, umfasst <code>oblique</code> Schriftschnitte, die lediglich durch automatisierte Schrägstellung normaler Buchstaben derselben Familie erzeugt wurden („kursiviert“).<br>
 <code>italic</code> ist in der Regel die bessere Wahl, da die Form der Buchstaben und die Abstände der Buchstaben untereinander vom Schriftgestalter manuell festgelegt werden, was zu einer harmonischeren Textdarstellung führt.</p>

<p>Da beide Varianten sehr ähnlich sind, wird die jeweils andere verwendet, steht die gewählte Variante nicht zur Verfügung. Dieses Verhalten kann mit {{cssxref("font-synthesis")}} geändert werden.</p>

<h3 id="Variable_Schriftarten">Variable Schriftarten</h3>

<p>Variable Schriftarten erlauben eine präzise Steuerung der Darstellung von kursivierten Schriftschnitten mit Hilfe des Werts <code>&lt;angle&gt;</code> im Anschluss an <code>oblique</code>.</p>

<p>Bei variablen Schriftarten nach TrueType- oder OpenType-Spezifikation wird die Schrägstellung bei <code>oblique</code> über die Eigenschaft <code>"slnt"</code>  realisiert, sowie <code>italic</code> mit einem Wert von 1 für die Eigenschaft  <code>"ital"</code>(siehe {{cssxref("font-variation-settings")}}).</p>

<p>Das nachstehende Beispiel benötigt einen Browser, der die Syntax nach CSS Fonts Level 4 versteht, d.h. die Angabe eines Winkels bei <code>font-style: oblique</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 is created by <span class="col-11 mr-2 text-gray-dark">David Berlow</span> (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;
}

</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="Formal_syntax">Formal syntax</h3>

{{csssyntax}}

<h2 id="Beispiel">Beispiel</h2>

<div class="hidden">
<pre class="brush: html">&lt;p class="normal"&gt;Text im Schnitt normal.&lt;/p&gt;
&lt;p class="italic"&gt;Text im Schnitt italic.&lt;/p&gt;
&lt;p class="oblique"&gt;Text im Schnitt 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>

<h2 id="Barrierefreiheit">Barrierefreiheit</h2>

<p>Längere Abschnitte in kursiver Schrift können für Menschen mit einer Lesestörung (<a class="mw-redirect" href="https://de.wikipedia.org/wiki/Legasthenie" title="Legasthenie">Legasthenie</a> oder <a href="https://de.wikipedia.org/wiki/Dyslexie" title="Dyslexie">Dyslexie</a>) schwer bis gar nicht zu erfassen sein. Kursive Schrift sollte deshalb nur als Hervorhebung einzelner Stellen verwendet werden.</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="Spezifikationen">Spezifikationen</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Kommentar</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS4 Fonts', '#font-style-prop', 'font-style')}}</td>
   <td>{{Spec2('CSS4 Fonts')}}</td>
   <td>Fügt die Möglichkeit einer Winkelangabe für <code>oblique</code> hinzu.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Fonts', '#font-style-prop', 'font-style')}}</td>
   <td>{{Spec2('CSS3 Fonts')}}</td>
   <td>Keine Änderung</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-style', 'font-style')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Keine Änderung</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#font-style', 'font-style')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>Erste Definition</td>
  </tr>
 </tbody>
</table>

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

<h2 id="Browserkompatibilität">Browserkompatibilität</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>