4.1 Eigenschaft font-style
CSS bietet noch viele Eigenschaften zur Steuerung von Schriftarten und deren Darstellung auf Webseiten. Die Eigenschaften
font-style, font-variant und font-stretch ermöglichen die Anpassung des Textstils,
seiner Darstellung und Breite. Schauen wir uns jede dieser Eigenschaften genauer an.
Die Eigenschaft font-style definiert den Stil des Textes. Sie wird verwendet, um den Schrägschriftstil
(Kursiv) oder den normalen Textstil festzulegen.
Werte:
normal: normaler Textstil (Standard)italic: schräger Text (Kursiv)oblique: schräger Text, ähnlich wie Italic, aber unterscheidet sich im Neigungswinkel
Anwendungsbeispiel:
.normal {
font-style: normal;
}
.italic {
font-style: italic;
}
.oblique {
font-style: oblique;
}
<body>
<p class="normal">Das ist normaler Text.</p>
<p class="italic">Das ist schräger Text (Kursiv).</p>
<p class="oblique">Das ist schräger Text (oblique).</p>
</body>
4.2 Eigenschaft font-variant
Die Eigenschaft font-variant steuert die Darstellung des Textes in Kapitälchen. Sie ermöglicht es, die
Schriftart so zu ändern, dass alle Buchstaben groß geschrieben werden, aber mit kleinerer Größe für ursprünglich
Kleinbuchstaben.
Werte:
normal: normaler Text (Standard)small-caps: Text in Kapitälchen
Anwendungsbeispiel:
.normal {
font-variant: normal;
}
.small-caps {
font-variant: small-caps;
}
<body>
<p class="normal">Das ist normaler Text.</p>
<p class="small-caps">Das ist Text in Kapitälchen.</p>
</body>
Zusätzliche Werte (CSS Fonts Level 4)
CSS Fonts Level 4 fügt zusätzliche Werte für die Eigenschaft font-variant hinzu, wie all-small-caps, petite-caps,
all-petite-caps, unicase und titling-caps. Diese werden jedoch nicht in allen Browsern unterstützt.
4.3 Eigenschaft font-stretch
Die Eigenschaft font-stretch steuert den Grad der Komprimierung oder Dehnung der Schriftart. Sie ändert
die Schriftbreite, ohne die Höhe zu beeinflussen, und wird verwendet, um die passende Schriftvariante auszuwählen,
wenn sie verfügbar ist.
Werte:
normal: normale Schriftbreite (Standard)ultra-condensed: maximal komprimierte Schriftextra-condensed: sehr komprimierte Schriftcondensed: komprimierte Schriftsemi-condensed: mäßig komprimierte Schriftsemi-expanded: mäßig gedehnte Schriftexpanded: gedehnte Schriftextra-expanded: sehr gedehnte Schriftultra-expanded: maximal gedehnte Schrift
Anwendungsbeispiel:
.normal {
font-stretch: normal;
}
.condensed {
font-stretch: condensed;
}
.expanded {
font-stretch: expanded;
}
<body>
<p class="normal">Das ist Text mit normaler Schriftbreite.</p>
<p class="condensed">Das ist Text mit komprimierter Schriftbreite.</p>
<p class="expanded">Das ist Text mit gedehnter Schriftbreite.</p>
</body>
GO TO FULL VERSION