In diesem Kapitel werden wir über Schriftarten sprechen.

Hier werden wir folgende Eigenschaften betrachten:

Wenn wir einige Information, einen Text oder einen Link auf unserer Webseite schreiben, müssen wir sie stylen. Wir verwenden die oben genannten Eigenschaften für Textstile. Lassen Sie uns mehr über diese Eigenschaften erfahren.

Font family

Für die Schriftfamilie des Textes verwenden wir die Eigenschaft font-family. Das ist der Name der Schriftart, die wir auf unserer Webseite verwenden möchten.

Lassen Sie uns ein Beispiel betrachten:

p {
  font-family: Arial, sans-serif;
}

Wie Sie sehen, haben wir mit unserem Tag <p> die Eigenschaft font-family verwendet. Wir unterscheiden zwei Arten von font family:

  • generic family - eine Gruppe von font family mit ähnlichem Aussehen (wie "Serif" oder "Sans-serif")
  • font family - eine bestimmte font family (wie "Times New Roman" oder "Arial")

Wenn wir eine bestimmte font family verwenden, die aus mehr als einem Wort besteht, nehmen wir den Namen in Anführungszeichen (wie "Times New Roman"). Gleichzeitig müssen wir mehr als eine font family schreiben, denn falls der Browser Ihre erste font family nicht unterstützt, können Sie andere ähnliche font family haben.

Schriftart

Wir verwenden die Eigenschaft font-style hauptsächlich für Texte, die wir kursiv schreiben wollen.

Meistens verwenden wir die folgenden Werte der Eigenschaft font-style:

  • normal
  • italic
  • oblique

Lassen Sie uns den Code und seinen Look in den Browsern ansehen.

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
  </head>
  <body>
    <p style="font-style:normal">Das ist ein Absatz mit der Eigenschaft font-style mit dem Wert normal.</p>
    <p style="font-style:italic">Das ist ein Absatz mit der Eigenschaft font-style mit dem Wert italic.</p>
    <p style="font-style:oblique">Das ist ein Absatz mit der Eigenschaft font-style mit dem Wert oblique.</p>
  </body>
</html>

Voreingestellt ist unser Text so eingestellt: font-style: normal, auch ohne diesen Wert einzugeben.

Font Size

Für die Eingabe der Textgröße verwenden wir die Eigenschaft font-size.

Wir müssen den CSS-Eigenschaften Werte geben. Die Werte werden durch Pixel oder em angegeben. Beachten Sie bitte, dass 1em=16px. Meistens verwenden wir Pixel (px).

Lassen Sie uns einige Beispiele betrachten.

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
  </head>
  <body>
    <h3 style="font-size:40px;"> Eine Überschrift mit der Eigenschaft font-size.</h3>
    <p style="font-size:25px;"> Ein Absatz mit der Eigenschaft font-size.</p>
    <a style="font-size:2em;"> Ein Link mit der Eigenschaft font-size.</a>
  </body>
</html>

Sie können alle genannten Eigenschafte mit unserem HTML-Online-Editor hier testen.

Line Height

Wir verwenden die Eigenschaft line-height für den Raum zwischen den Linien. Wir geben der Eigenschaft line-height einen Wert mit einem Pixelwert.

Lassen Sie uns ein Beispiel betrachten.

Diesmal werden wir größeren Text schreiben, um die Bedeutung von line-height zu verstehen.

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
  </head>
  <body>
    <p style="line-height:10px">Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete. Sie hat nicht nur fünf Jahrhunderte, sondern auch den Sprung in den elektronischen Satz ohne Wesentlichen Veränderungen überlebt.
    </p>
    <p style="line-height:20px">Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist der Standard-Dummy-Text der Branche seit den 1500er Jahren, als ein unbekannter Drucker ein Setzschiff vom Typ nahm und es zu einem Musterbuch verarbeitete. Sie hat nicht nur fünf Jahrhunderte, sondern auch den Sprung in den elektronischen Satz ohne Wesentlichen Veränderungen überlebt.
    </p>
  </body>
</html>

Font Weight

Wenn einen Text kursiv machen möchten, verwenden wir die Eigenschaft font-style.

Jetzt lernen wir, wie man einen Text fetter machen können, falls es sich nicht um eine Überschrift handelt, denn voreingestellt sind die Überschriften fett gedruckt.

Dafür verwenden wir die Eigenschaft font-weight.

Meistens verwenden wir die folgenden Werte der Eigenschaft font-weight:

  • normal
  • bold

Der Wert kann auch durch Zahlen angegeben werden.

Jetzt betrachten wir ein Beispiel.

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
  </head>
  <body>
    <p style="font-weight:900">Ein Absatz mit der Eigenschaft font-weight mit dem Wert bold.</p>
    <p style="font-weight:normal">Eine Absatz mit der Eigenschaft font-weight mit dem Wert normal.</p>
    <p style="font-weight:bold">Ein Absatz mit der Eigenschaft font-weight mit dem Wert bold.</p>
  </body>
</html>

Beachten Sie bitte, dass wir einen Wert mit den Zahlen 100-900 angeben können. Der Wert 100 ist normal und 900 ist fett gedruckt. Je groß die Zahl zwischen 100 und 900 ist, desto fetter ist die Schrift.

Browser-Support

chrome edge firefox safari opera
1.0+ 12.0+ 1.0+ 1.0+ 3.5+

Übe dein Wissen

Was sind einige Möglichkeiten, um Schriftarten in CSS zu ändern?
Finden Sie das nützlich?