CSS font – Schrift Kurzform

Die CSS font Eigenschaft beinhaltet alle CSS Eigenschaften für Schriftstile, die verwendet werden können. Um Platz zu sparen, kann anstatt mehrere Einzeleigenschaften auf die Kurzform font genutzt werden. Diese wird in diesem Tutorial näher erläutert.

Reihenfolge:

1. font-style
2. Leerzeichen
3. font-variant
4. Leerzeichen
5. font-weight
6. Leerzeichen
7. font-size
8. Slash
9. line-height
10. Leerzeichen
11. font-family (mehrere getrennt per Komma, Schriftarten mit Leerzeichen in Anführungsstriche notieren)

Beschreibung und Syntax zur CSS font Eigenschaft

Eingabe 1:

font: italic small-caps bold 14px/1.1 "Times New Roman";

Ergebnis 1:

Das Ergebnis der CSS Eingabe sieht nun so aus!

oder

Eingabe 2:

font: normal normal normal 16px/150% Verdana,Arial;

Ergebnis 2:

Das Ergebnis der CSS Eingabe sieht nun so aus!

Erläuterungen zum Code

In Beispiel 1 verwenden wir ein paar gängige CSS Angaben, die wir bereits wie nachfolgend behandelt haben (CSS font-…). Hier liegt unsere Besonderheit allerdings in der Schriftart. Da diese Leerzeichen enthält, müssen wir diese in Anführungszeichen schreiben. Siehe hierzu font-family.

Im zweiten Beispiel nutzen wir das Attribut “normal", um die Schrift nicht zu verändern. Lediglich Schriftgröße und Zeilenabstand wird verändert. Ebenso nutzen wir hier ein Komma zur Abtrennung zweier Schriftarten. Auch dies haben wir bereits unter font-family bereits behandelt (Auswahlverfahren falls Schriftart nicht vorhanden).

Informationen und Werte

Die korrekte Reihenfolge für die font-Wertübergabe sieht so aus:

font-style | font-variant | font-weight | font-size/line-height | font-family