CSS - Elemente - Schriftformatierung

1. color

Definiert die Schriftfarbe. Die entsprechenden Angaben dazu findet ihr bei den Wertangaben.

2. font

Dies ist die Zusammenfassung der folgenden Eigenschaften. Wenn ihr die Kurzform wählt, so müsst ihr euch an die hier vorgegebene Reihenfolge halten! Und noch etwas. Bei der Schreibweise für Tippfaule gilt hier, dass die Werte für font-size und font-family Pflichtangaben sind.

font-family

Damit binden wir die entsprechenden Schriftarten ein. Die einzelnen Angaben werden durch ein Komma getrennt.

body
{
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

Sollte die Bezeichnung der Schriftart Leerzeichen beinhalten, so muss die entsprechende Angabe in Anführungszeichen gesetzt werden, also zum Beispiel so.

body
{
  font-family: "Times New Roman", Times, ...;
}

font-size

Bestimmt die Schriftgröße. Erlaubt sind numerische Angaben sowie die folgenden Werte, die ich allerdings noch nie benutzt habe.

• (x-)(xx-)small klein in verschiedenen Abstufungen
• (x-)(xx-)large groß in verschiedenen Abstufungen
• medium mittelgroß
• smaller kleiner als das Elternelement
• larger größer als das Elternelement

font-style

Damit wird die Neigung der Schrift eingestellt. Folgende Optionen sind dabei möglich:

• italic kursiver Schriftstil
• oblique schräg gestellter Schriftstil
• normal normaler Schriftstil

Wird keine explizite Angabe gemacht, so ist normal die Standardanweisung.

font-variant

Setzt so genannte Kapitälchen (kleine Großbuchstaben) ein. Die Möglichkeiten sind:

• small-caps Kapitälchen
• normal normale Schriftvariante (Standard)

font-weight

Definiert die Dicke einer Schrift. Allerdings klappt die Angabe eines Zahlenwertes nicht immer, da sie von der Schriftart nicht unterstützt werden.

• bold fett
• bolder extrafett
• lighter dünner
• normal normal (Standard)
• Werte von 100 (extra dünn) bis 900 (extra fett)

line-height

Bestimmt die Zeilenhöhe für Fliesstext. Erlaubt sind nur numerische Angaben.

3. letter-spacing

Setzt den Abstand zwischen einzelnen Buchstaben fest. Erlaubt sind ausschließlich numerische Angaben.

4. text-decoration

Hiermit können zusätzliche Textformatierungen vorgenommen werden.

• underline unterstrichen
• overline überstrichen
• line-through durchgestrichen
• none = normal (Standard)

5. text-transform

Damit kann man Groß- oder Kleinschreibung erzwingen, ganz gleich wie der eigentliche Text geschrieben ist.

• capitalize Wortanfang mit Großbuchstaben
• uppercase nur Großbuchstaben
• lowercase Nur Kleinbuchstaben
• none normal (keine Formatierung, Standard)

6. word-spacing

Setzt den Abstand zwischen einzelnen Wörtern fest. Erlaubt sind nur numerische Angaben.

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt