From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- files/de/web/css/font-style/index.html | 225 +++++++++++++++++++++++++++++++++ 1 file changed, 225 insertions(+) create mode 100644 files/de/web/css/font-style/index.html (limited to 'files/de/web/css/font-style/index.html') 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 +--- +
{{CSSRef}}
+ +

Die CSS-Eigenschaft font-style legt fest, ob Text mit einem kursiven Schnitt der gewählten Schriftfamilie ({{cssxref("font-family")}}) dargestellt werden soll.

+ +
{{EmbedInteractiveExample("pages/css/font-style.html")}}
+ + + +

Syntax

+ +
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 akzeptiert ein einzelnes der nachfolgenden Schlüsselwörter, welchem im Falle von oblique ein Winkel folgen darf.

+ +

Werte

+ +
+
normal
+
Wählt einen Schriftschnitt mit nicht-kursiven Buchstaben.
+
italic
+
Wählt einen kursiven Schriftschnitt der Eigenschaft italic (siehe unten). Steht keiner zur Verfügung, wird stattdessen der Wert oblique angewendet. Ist auch dies nicht möglich, wird die Schrägstellung von 14° durch den Browser erzeugt.
+
oblique
+
Wählt einen kursiven Schriftschnitt der Eigenschaft oblique (siehe unten). Steht keiner zur Verfügung, wird stattdessen der Wert italic angewendet. Ist auch dies nicht möglich, wird eine Schrägstellung von 14° durch den Browser erzeugt.
+
oblique <angle>
+
Wählt einen kursiven Schriftschnitt der Eigenschaft oblique (siehe unten), dessen Buchstaben genau oder annähernd im Winkel <angle> 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 font matching section).
+
Steht kein passender Schriftschnitt zur Verfügung, wird die Schrägstellung durch den Computer aus einem normalen Schriftschnitt erzeugt.
+
Der gültige Winkelbereich erstreckt sich von -90deg bis 90deg (einschließlich). Positive Werte bewirken eine Schrägstellung in Richtung Zeilenende, negative in Richtung Zeilenanfang.
+
+ +

italic gegenüber oblique

+ +

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

+ +

Während italic jedoch Schriftschnitte bezeichnet, die bereits kursiv entworfen wurden, umfasst oblique Schriftschnitte, die lediglich durch automatisierte Schrägstellung normaler Buchstaben derselben Familie erzeugt wurden („kursiviert“).
+ italic 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.

+ +

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.

+ +

Variable Schriftarten

+ +

Variable Schriftarten erlauben eine präzise Steuerung der Darstellung von kursivierten Schriftschnitten mit Hilfe des Werts <angle> im Anschluss an oblique.

+ +

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

+ +

Das nachstehende Beispiel benötigt einen Browser, der die Syntax nach CSS Fonts Level 4 versteht, d.h. die Angabe eines Winkels bei font-style: oblique.

+ +
{{EmbedLiveSample("variable-font-example", 1200, 180, "", "", "example-outcome-frame")}}
+ +

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;
+}
+
+
+ + + +

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

Formal syntax

+ +
{{csssyntax}}
+ +

Beispiel

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

{{ EmbedLiveSample('Font_styles') }}

+ +

Barrierefreiheit

+ +

Längere Abschnitte in kursiver Schrift können für Menschen mit einer Lesestörung (Legasthenie oder Dyslexie) schwer bis gar nicht zu erfassen sein. Kursive Schrift sollte deshalb nur als Hervorhebung einzelner Stellen verwendet werden.

+ + + +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS4 Fonts', '#font-style-prop', 'font-style')}}{{Spec2('CSS4 Fonts')}}Fügt die Möglichkeit einer Winkelangabe für oblique hinzu.
{{SpecName('CSS3 Fonts', '#font-style-prop', 'font-style')}}{{Spec2('CSS3 Fonts')}}Keine Änderung
{{SpecName('CSS2.1', 'fonts.html#propdef-font-style', 'font-style')}}{{Spec2('CSS2.1')}}Keine Änderung
{{SpecName('CSS1', '#font-style', 'font-style')}}{{Spec2('CSS1')}}Erste Definition
+ +

{{cssinfo}}

+ +

Browserkompatibilität

+ + + +

{{Compat("css.properties.font-style")}}

-- cgit v1.2.3-54-g00ecf