initial commit

1 files changed, 225 insertions, 0 deletions

diff --git a/files/de/web/css/font-style/index.html b/files/de/web/css/font-style/index.html
new file mode 100644
index 0000000000..02430dd746
--- /dev/null
+++ b/files/de/web/css/font-style/index.html
@@ -0,0 +1,225 @@
+---
+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>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<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>