CSS-Font

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>

Versuch es selber!

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

<!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>

Versuch es selber!

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>

Versuch es selber!

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>

Versuch es selber!

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.