font

Die font Eigenschaft hat zwei unterschiedliche Verwendungszwecke:

  1. Die font Eigenschaft kann als Kurzform für die Eigenschaften font-style, font-variant, font-weight, font-size, line-height und font-family dienen und setzt dabei, wie bei jeder Kurzform, die einzelnen Eigenschaften auf ihre Standardwerte zurück, wenn nichts weiter angegeben wird, oder
  2. die jeweilige Schrift eines Elementes kann auf eine Systemschriftart festlegt werden. Diese Systemschriftarten können jedoch nur über die font Eigenschaft gesetzt werden und nicht etwa über die font-family Eigenschaft, sodass font nicht nur als eine Kurznotation von verschiedenen Schrift-Eigenschaften anzusehen ist.

Außerdem ist zu beachten, dass font keine weiteren Eigenschaften wie etwa font-stretch oder font-size-adjust mit einschließt und font-size-adjust dennoch auf den Standardwert (normal) zurückgesetzt wird, wenn die font Eigenschaft notiert wird.
Das Festlegen von font-size sowie font-family ist verpflichtend, sonst wird die Anweisung komplett ignoriert.

  • Standardwert: siehe einzelne Eigenschaften
  • Anwendbar auf: alle Elemente
  • Vererbbar: Ja
  • Prozentwerte: erlaubt für font-size und line-height
  • Medium: visuell
  • berechneter Wert: siehe einzelne Eigenschaften

Syntax

[
  [ <font-style> || <font-variant> || <font-weight> ]?
  <font-size>
  [ / <line-height> ]?   
  <font-family>
] 
| caption | icon | menu | message-box | small-caption | status-bar
| -moz-window | -moz-desktop | -moz-workspace | -moz-document | -moz-info
| -moz-dialog | -moz-button | -moz-pull-down-menu | -moz-list | -moz-field
| inherit

Werte

Wird font als Kurzform verwendet, siehe einzelne Eigenschaften für die unterschiedlichen Werteangaben.

Werte für System-Fonts

caption
Schrift, die für Beschriftungen von Kontrollelementen (Buttons, Drop-Downs, etc.) verwendet wird.
icon
Schrift, die zur Beschriftung von Icons verwendet wird.
menu
Schrift die in Menüs benutzt wird.
message-box
Schrift die in Dialogboxen verwendet wird.
small-caption
Schrift die für kleine Kontrollelemente benutzt wird.
status-bar
Schrit die in Statusleisten benutzt wird.

Mozilla Erweiterungen für System-Fonts

-moz-window
Schrift, die für den Inhalt in einem Fenster verwendet wird.
-moz-desktop
Schrift, die auf dem Desktop benutzt wird.
-moz-workspace
Schrift, die für ein Arbeitsplatz-Fenster verwendet wird.
-moz-document
Schrift, die für den Inhalt eines Dokumentes benutzt wird.
-moz-dialog
Schrift die in Dialogboxen verwendet wird (wie message-box).
-moz-button
Schrift, die für Beschriftungen von Kontrollelementen (Buttons, Drop-Downs, etc.) verwendet wird (wie caption).
-moz-pull-down-menu
Schrift, die für Aufklapp-Menüs benutzt wird.
-moz-list
Schrift, die in Listenmenüs verwendet wird.
-moz-field
Schrift, die in Textfeldern (z.B. input) verwendet wird.
-moz-info
?

Beispiele

Link zum Live Beispiel

Beispiel 1

/* Setze die Schriftgröße auf 12px und die Zeilenhöhe auf 14px, sowie die Schriftart auf sans-serif */
p { font: 12px/14px sans-serif }

Beispiel 2

/* Setze die Schriftgröße auf 80% des Elternelements und setze die Schriftart auf sans-serif */ 
p { font: 80% sans-serif }

/* Hat den gleichen Effekt wie: */
p {
  font-family: sans-serif;
  font-style: normal;
  font-variant: normal;
  font-weight: 600;
  font-size: 80%;
  line-height: normal;
}

Beispiel 3

/* Setze die Schriftstärke auf fett, die Textneigung auf kursiv, die Schriftgröße auf groß, 
und die Schriftart auf serif. */
p { font: bold italic large serif }

Beispiel 4

/* Benutze die gleiche Schriftart wie die Statusleiste des Fensters. */
p { font: status-bar }

Browser Kompatibilität

Browser ab Version
Kurznotation Systemschriften
Internet Explorer 3.0-4.0 4.0-5.5
Firefox (Gecko) 1.0 (1.0) 1.0 (1.0)
Opera 3.5 6.0
Safari (WebKit) 1.0 (85) 1.0 (85)

Spezifikation

Siehe auch

Verwandte Themen