WEBDESIGN ZÜRICH PINKDOT


Schriftgestaltung

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

font-style

italic | oblique | normal | inherit

Ausgangswert: normal
Anwendbar auf: alle Elemente
Vererbung: Ja
Berechneter Wert: Wie angegeben

Damit wird festgelegt, ob ein kursiver (italic), geneigter (oblique) oder normaler Schriftschnitt verwendet werden soll. Kursive Schrift hat innerhalb einer Schriftfamilie meistens eine eigene Schriftart. Ist kein abgeschrägter Schriftschnitt vorhanden, berechnet der Browser (manchmal) selber einen, indem er den normalen Zeichensatz neigt. In der Realität ignorieren dies jedoch die meisten Benutzerprogramme.

font-variant

small-caps | normal | inherit

Ausgangswert: normal
Anwendbar auf: alle Elemente
Vererbung: Ja
Berechneter Wert: Wie angegeben

Stellt den Text in Kapitälchen dar.

font-weight

normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit

Ausgangswert: normal
Anwendbar auf: alle Elemente
Vererbung: Ja
Berechneter Wert: Einer der numerischen Werte (100 usw.), oder einer der numerischen Werte und einer der relativen Werte (bolder oder lighter).

Diese Eigenschaft legt das Schriftgewicht fest, das bei der Darstellung eines Elementtextes benutzt wird. Der numerische Wert 400 entspricht dem Schlüsselwort normal, 700 üblicherweise der von bold. Das Schriftgewicht für einen numerischen Wert muss mindestens so »leicht« sein wie der nächstkleinere numerische Wert und mindestens so »schwer« wie der nächsthöhere. Wenn ein Zeichensatz also beispielsweise nur die Schriftgewichte normal und bold enthält, werden die Werte 100 bis 500 auf das Schlüsselwort normal abgebildet, während die Werte 600 bis 900 auf bold abgebildet werden.

font-size

xx-small | x-small | small | medium | large | x-large | xx-large | smaller | larger | <Höhe> | <Prozentwert> | inherit

Voreinstellung: medium
Anwendbar auf: alle Elemente
Vererbung: Ja
Prozentwerte:Beziehen sich auf den berechneten Wert von font-size des Elternelements
Berechneter Wert: Die absolute Höhe

Definiert die verwendete Schriftgrösse. Sie kann als absolute oder relative Grösse, anhand von Längeneinheiten oder als Prozentwert angegeben werden. Negative Höhenangaben und Prozentwerte sind nicht erlaubt.

line-height

normal | number | length | percentage | inherit

Voreinstellung: normal
Anwendbar auf: alle Elemente (Details zu Block-Elemente finden Sie im Text).
Vererbung: Ja
Prozentwerte: Relativ zur Schriftgrösse (font-size) des Elements.
Berechneter Wert: Für Höhen- und Prozentwerte der absoluten Wert; ansonsten wie angegeben.

Mit dieser Eigenschaft können Sie die Höhe der Zeilenboxen verändern. Wird diese Eigenschaft auf ein Block-Element angewendet, bezieht sich der Wert auf den minimalen Abstand zwischen den Grundlinien in diesem Element. Die Differenz zwischen line-height und font-size (der so genannte »Durchschuss«) wird halbiert und zu gleichen Teilen dem oberen und unteren Teil des Inhaltsbereichs der einzelnen Elemente in der betreffenden Zeile zugeschlagen. Die kürzeste Box, die sämtliche Inhalte enthalten kann, ist die Zeilenbox. Ein einfacher numerischer Wert wird als Skalierungsfaktor betrachtet, der anstelle eines berechneten Werts vererbt werden kann. Negative Werte sind nicht erlaubt.

font-family

[[ <Schriftfamilie> | <allgemeine Schriftfamilie> ] ,]*[ <Schriftfamilie> | <allgemeine Schriftfamilie> ] | inherit

Ausgangswert: Abhängig vom Benutzerprogramm
Anwendbar auf: alle Elemente
Vererbung: Ja
Berechneter Wert: Wie angegeben

Legt fest, welche Schrift oder Schriftfamilie benutzt werden soll. Eine bestimmte Schriftfamilie (z.B. Arial) kann nur dann benutzt werden, wenn sie auf dem Rechner des Benutzers auch verfügbar ist. Mit dieser Eigenschaft können keine Schriften heruntergeladen werden. Es wird daher empfohlen, eine allgemeine Schriftfamilie als Ausweichlösung mit anzugeben, andernfalls stellt der Browser den Inhalt in der Standartschrift dar. Enthält ein Schriftname Leerzeichen oder nichtalphabetische Zeichen, sollten er mit doppelten Hochkommas (" Times New Roman") umgeben werden.

font

[ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <’font-size’> [ / <'line-height'> ]? <’font-family’> ] | caption | icon | menu | message-box | small-caption | status-bar | inherit

Voreinstellung: Siehe die einzelnen Eigenschaften
Anwendbar auf: alle Elemente
Vererbung: Ja
Prozentwerte: Beziehen sich auf den Wert von <font-size> des Elternelements und die berechnete Zeilenhöhe des Elements.
Berechneter Wert: Siehe die einzelnen Eigenschaften (font-style usw.).

caption: Systemschrift in Schaltflächen
icon: Symbole (Icons)
menu: Klappmenüs
message-box: Dialogfenster
small-caption: kleine Schaltflächen
status-bar: Schrift in der Windows-Statusleiste

Mit font können mehrere Eigenschaften der zu verwendenden Schrift auf einmal definiert werden. Zudem kann man mit Schlüsselwörtern wie icon die Systemschrift des Benutzers steuern. Wird kein Schlüsselwort benutzt, muss zumindest ein Wert für die Schriftgröße (font-size) und Schriftfamilie (font-family) angegeben werden – in dieser Reihenfolge.