CSS-Schrift
In diesem Kapitel werden wir Schriftarten besprechen.
Die CSS-Schrifteigenschaften werden verwendet, um die Größe, die Schriftfamilie, die Fettstärke und den Stil des Textes festzulegen.
Die CSS-Eigenschaft font ist eine Kurzschreibweise, die mehrere Schrifteigenschaften kombiniert. Hier erklären wir die einzelnen Eigenschaften, aus denen sie besteht:
Wenn wir Text oder Links zu einer Webseite hinzufügen, gestalten wir sie mit diesen Eigenschaften. Schauen wir sie uns im Detail an.
Font Family
Wir verwenden die Eigenschaft font-family, um die Schrift für den Text festzulegen. Damit wird der Name der auf der Webseite verwendeten Schrift definiert.
CSS Font
p {
font-family: Arial, sans-serif;
}Wie Sie sehen, haben wir die Eigenschaft font-family auf unser <p>-Tag angewendet. Wir unterscheiden zwei Arten von Familien:
- generische Familie - eine Gruppe von Schriftfamilien mit ähnlichem Aussehen (wie "Serif" oder "Sans-serif")
- Schriftfamilie - eine bestimmte Schriftfamilie (wie "Times New Roman" oder "Arial")
Wenn ein Schriftfamilienname aus mehr als einem Wort besteht, setzen Sie ihn in Anführungszeichen (z. B. "Times New Roman"). Es wird außerdem empfohlen, eine Fallback-Schriftfamilie anzugeben, falls der Browser die erste nicht unterstützt.
Font Style
Wir verwenden die Eigenschaft font-style hauptsächlich, um Text kursiv darzustellen.
Die am häufigsten verwendeten Werte für die Eigenschaft font-style sind:
normal, zeigt den Text normal an,italic, zeigt den Text kursiv an,oblique, lässt den Text „schräg“ erscheinen.
Beispiel für die Eigenschaft font-style:
Beispiel mit CSS font-style-Eigenschaft|CSS Font|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p style="font-style:normal">This is paragraph with font-style property with normal value.</p>
<p style="font-style:italic">This is paragraph with font-style property with italic value.</p>
<p style="font-style:oblique">This is paragraph with font-style property with oblique value.</p>
</body>
</html>Standardmäßig ist unser Text font-style: normal, auch ohne dass dieser Wert geschrieben wird.
Font Size
Wir verwenden die Eigenschaft font-size, um die Größe des Textes festzulegen.
Werte können in Pixeln, Punkten, em, rem usw. angegeben werden. Die vollständige Liste finden Sie im Abschnitt font-size. Beachten Sie, dass 1em der berechneten Schriftgröße des Elternelements entspricht (oft standardmäßig 16px). Pixel (px) sind die am häufigsten verwendete Einheit.
Beispiel für die Eigenschaft font-size:
Beispiel mit CSS font-size-Eigenschaft|CSS Font|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h3 style="font-size:40px;"> Some heading with font-size property.</h3>
<p style="font-size:25px;"> Some paragraph with font-size property.</p>
<a style="font-size:2em;"> Some link with font-size property.</a>
</body>
</html>Sie sollten es auch selbst überprüfen. Das können Sie mit unserem HTML-Online-Editor tun hier klicken.
Font Variant
Die Eigenschaft font-variant ermöglicht es Ihnen, Text auf normal oder small-caps zu setzen.
Der Wert small-caps wandelt Kleinbuchstaben in Großbuchstaben um, zeigt sie jedoch in einer kleineren Größe als die ursprünglichen Großbuchstaben an.
Beispiel für die Eigenschaft font-variant:
Beispiel mit CSS font-variant-Eigenschaft|CSS Font|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.smallcaps {
font-variant: small-caps;
}
</style>
</head>
<body>
<h2>Font-variant property example</h2>
<p>Here we used a normal text as you can see.</p>
<p class="smallcaps">But We Used A Text With Small-Caps Here.</p>
</body>
</html>Font Weight
Lernen wir nun, wie man normalen Text fetter macht, da Überschriften standardmäßig fett sind.
Dafür verwenden wir die Eigenschaft font-weight.
Die am häufigsten verwendeten Werte für die Eigenschaft font-weight sind:
normalbold
Werte können auch als Zahlen angegeben werden.
Beispiel für die Eigenschaft font-weight:
Beispiel mit CSS font-weight-Eigenschaft|CSS Font|W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p style="font-weight:900">Some paragraph with the font-weight property with value bold.</p>
<p style="font-weight:normal">Some paragraph with the font-weight property with value normal.</p>
<p style="font-weight:bold">Some paragraph with the font-weight property with value bold.</p>
</body>
</html>Wie bereits erwähnt, reichen numerische Werte von 100 bis 900. Der Wert 400 entspricht normal, und 700 entspricht bold. Je höher die Zahl von 100 bis 900, desto fetter wird die Schrift.
Practice
Welche der folgenden Aussagen sind in Bezug auf CSS-Schriften wahr?