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