Die font Eigenschaft hat zwei unterschiedliche Verwendungszwecke:
- Die
fontEigenschaft kann als Kurzform für die Eigenschaftenfont-style,font-variant,font-weight,font-size,line-heightundfont-familydienen und setzt dabei, wie bei jeder Kurzform, die einzelnen Eigenschaften auf ihre Standardwerte zurück, wenn nichts weiter angegeben wird, oder - die jeweilige Schrift eines Elementes kann auf eine Systemschriftart festlegt werden. Diese Systemschriftarten können jedoch nur über die
fontEigenschaft gesetzt werden und nicht etwa über diefont-familyEigenschaft, sodassfontnicht nur als eine Kurznotation von verschiedenen Schrift-Eigenschaften anzusehen ist.
Außerdem ist zu beachten, dass font keine weiteren Eigenschaften wie etwa font-stetch 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-sizeundline-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
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) |
