CSS Font
CSS font-Eigenschaften zum Stylen von Text, Festlegen von Schriftgröße, Fettdruck und Schriftfamilie. CSS font-Stile lernen.
Typografie ist eines der ersten Dinge, die ein Leser auf einer Seite bemerkt, und CSS bietet Ihnen eine feinkörnige Kontrolle darüber. Die CSS font-Eigenschaften definieren die Schriftart (font family), die Größe, das Gewicht (Fettdruck) und den Stil (z. B. Kursivschrift) Ihres Textes.
Dieses Kapitel stellt jede einzelne font-Eigenschaft vor, zeigt für jede ein ausführbares Beispiel und erläutert anschließend die font-Kurzschreibweise, mit der Sie alle Eigenschaften in einer einzigen Deklaration festlegen können.
Die CSS-Eigenschaft font ist eine Kurzschreibweise, die mehrere font-Eigenschaften zusammenfasst. Hier erläutern 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
Mit der Eigenschaft font-family legen wir die Schriftart für den Text fest. Sie definiert den Namen der Schriftart, die auf der Webseite verwendet wird.
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 (z. B. „Serif" oder „Sans-serif")
- Schriftfamilie – eine bestimmte Schriftfamilie (z. B. „Times New Roman" oder „Arial")
Wenn ein Schriftfamilienname aus mehr als einem Wort besteht, schließen Sie ihn in Anführungszeichen ein (z. B. „Times New Roman"). Es wird außerdem empfohlen, eine Ersatz-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, das den Text normal anzeigt,italic, das den Text kursiv darstellt,oblique, das den Text „neigt".
Beispiel der font-style-Eigenschaft:
<!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 hat unser Text font-style: normal, auch ohne diesen Wert explizit anzugeben.
Font Size
Mit der Eigenschaft font-size legen wir die Größe des Textes fest.
Werte können in Pixeln, Punkten, em, rem usw. angegeben werden. Eine vollständige Liste finden Sie im Abschnitt font-size. Beachten Sie, dass 1em der berechneten Schriftgröße des übergeordneten Elements entspricht (standardmäßig oft 16px). Pixel (px) sind die am häufigsten verwendete Einheit.
Beispiel der font-size-Eigenschaft:
<!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 das auch selbst ausprobieren. Das können Sie mit unserem HTML-Online-Editor tun: hier klicken.
Font Variant
Die Eigenschaft font-variant ermöglicht es Ihnen, Text als normal oder in Kapitälchen darzustellen.
Der Wert small-caps wandelt Kleinbuchstaben in Großbuchstaben um, stellt sie jedoch in einer kleineren Schriftgröße als die ursprünglichen Großbuchstaben dar.
Beispiel der font-variant-Eigenschaft:
<!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
Lassen Sie uns nun lernen, 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 der font-weight-Eigenschaft:
<!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 ist, desto fetter wird die Schrift.
Die font-Kurzschreibweise
Anstatt jede Eigenschaft in einer eigenen Zeile zu schreiben, können Sie alle auf einmal mit der font-Kurzschreibweise festlegen. Das hält Ihr Stylesheet kürzer und fasst zusammengehörige Deklarationen zusammen.
Die Reihenfolge der Werte ist wichtig. Die Syntax lautet:
font: font-style font-variant font-weight font-size/line-height font-family;Einige Regeln, die Sie beachten sollten:
font-sizeundfont-familysind erforderlich. Fehlt einer dieser Werte, wird die gesamte Deklaration ignoriert.font-style,font-variantundfont-weightsind optional und müssen vorfont-sizestehen.line-heightist optional und wird nachfont-sizeangegeben, getrennt durch einen Schrägstrich (/).- Jeder ausgelassene Wert wird auf seinen Standardwert zurückgesetzt, daher ist die Kurzschreibweise eine praktische Möglichkeit, frühere Langform-Deklarationen zu löschen.
Hier ist derselbe Absatz, der einmal mit Langform-Eigenschaften und einmal mit der Kurzschreibweise gestaltet wurde:
/* Longhand */
p {
font-style: italic;
font-weight: bold;
font-size: 18px;
line-height: 1.5;
font-family: Georgia, serif;
}
/* Equivalent shorthand */
p {
font: italic bold 18px/1.5 Georgia, serif;
}Weitere Details und Beispiele finden Sie im Kapitel font.