Websiteentwicklung: CSS: Schrift (allgemein)
Die Eigenschaft font ist eine Zusammenfassung einiger Eigenschaften vom Typ font zuzüglich der Eigenschaft line-height, die in einem späteren Abschnitt dieses Buches genauer beschrieben wird.
Der Initialwert entspricht jeweils denen der einzelnen Eigenschaften.
Es müssen allerdings nicht für alle Eigenschaften Werte gesetzt werden, für die nicht gesetzten gilt der Initialwert, nicht etwa der geerbte Wert.
Die Eigenschaft wird vererbt und ist anwendbar für alle Elemente bei visuellen Medien.
Die Reihenfolge der Eigenschaften im Wert ist vorgegeben, allerdings sind viele Angaben optional, können also weggelassen werden. Zunächst können Werte für font-style, font-variant, font-weight notiert werden, alle optional und egal in welcher Reihenfolge. Dann folgt font-size, optional gefolgt von einer Kombination von einem Schrägstrich '/' mit folgendem line-height, gefolgt von font-family.
line-height wird im Abschnitt über Textformatierungen erläutert und gibt die Zeilenhöhe an, sinnvoller Weise immer größer gleich 1em.
Alternativ zur Liste kann neben 'inherit' auch ein Schlüsselwort angegeben werden, welches einen bestimmten Satz von Werten repräsentiert: 'caption', 'icon', 'menu', 'message-box', 'small-caption', 'status-bar'. Diese Sätze sind im Darstellungsprogramm oder in der verwendeten graphischen Oberflächen definiert.
Beispiele
[Bearbeiten]Beispiel 1:
font: bold 1.3em 'Times New Roman', sans-serif
Dieser Text wird fett (font-weight), mit der Schriftgröße 1.3em (font-size) und der Schriftart „Times New Roman“ (font-family) dargestellt.
Beispiel 2:
Achtung: Falsches Beispiel!
font: small-caps Verdana italic 120%;
Dies wird nicht funktionieren, da die Reihenfolge nicht eingehalten wurde.
font: italic small-caps 120% Verdana, sans-serif
Dieses Beispiel dagegen wird funktionieren; die Reihenfolge wurde richtiggestellt.
Dieser Text wird kursiv (font-style), mit Kapitälchen (font-variant), Schriftgröße 120% (font-size) und Schriftart Verdana oder der generischen Schriftfamilie 'sans-serif' (font-family) dargestellt.
Beispiel 3:
font:bold italic small-caps 1.4em/2em serif
Zweizeiliges
Anwendungsbeispiel
Beispiel 4:
font:icon
Anwendungsbeispiel