1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
|
---
title: font
slug: Web/CSS/font
tags:
- CSS
- CSS Referenz
translation_of: Web/CSS/font
---
<p>{{CSSRef}}</p>
<p>Die <code>font</code> Eigenschaft hat zwei unterschiedliche Verwendungszwecke:</p>
<ol>
<li>Die <code>font</code> Eigenschaft kann als Kurzform für die Eigenschaften <a href="/de/docs/Web/CSS/font-style"><code>font-style</code></a>, <a href="/de/docs/Web/CSS/font-variant"><code>font-variant</code></a>, <a href="/de/docs/Web/CSS/font-weight"><code>font-weight</code></a>, <a href="/de/docs/Web/CSS/font-size"><code>font-size</code></a>, <a href="/de/docs/Web/CSS/line-height"><code>line-height</code></a> und <a href="/de/docs/Web/CSS/font-family"><code>font-family</code></a> dienen und setzt dabei, wie bei jeder Kurzform, die einzelnen Eigenschaften auf ihre Standardwerte zurück, wenn nichts weiter angegeben wird, oder</li>
<li>die jeweilige Schrift eines Elementes kann auf eine Systemschriftart festlegt werden. Diese Systemschriftarten können jedoch nur über die <code>font</code> Eigenschaft gesetzt werden und nicht etwa über die <a href="/de/CSS/font-family"><code>font-family</code></a> Eigenschaft, sodass <code>font</code> nicht nur als eine Kurznotation von verschiedenen Schrift-Eigenschaften anzusehen ist.</li>
</ol>
<p>Außerdem ist zu beachten, dass <code>font</code> keine weiteren Eigenschaften wie etwa <a href="/de/docs/Web/CSS/font-stretch"><code>font-stretch</code></a> oder <a href="/de/docs/Web/CSS/font-size-adjust"><code>font-size-adjust</code></a> mit einschließt und <a href="/de/docs/Web/CSS/font-size-adjust"><code>font-size-adjust</code></a> dennoch auf den Standardwert (<code>normal</code>) zurückgesetzt wird, wenn die <code>font</code> Eigenschaft notiert wird.<br>
Das Festlegen von <a href="/de/docs/Web/CSS/font-size"><code>font-size</code></a> sowie <a href="/de/docs/Web/CSS/font-family"><code>font-family</code></a> ist verpflichtend, sonst wird die Anweisung komplett ignoriert.</p>
<ul>
<li>Standardwert: siehe einzelne Eigenschaften</li>
<li>Anwendbar auf: alle Elemente</li>
<li>Vererbbar: Ja</li>
<li>Prozentwerte: erlaubt für <code>font-size</code> und <code>line-height</code></li>
<li>Medium: visuell</li>
<li>berechneter Wert: siehe einzelne Eigenschaften</li>
</ul>
<h2 id="Syntax">Syntax</h2>
<pre class="eval">[
[ <<a href="/de/docs/Web/CSS/font-style">font-style</a>> || <<a href="/de/docs/Web/CSS/font-variant">font-variant</a>> || <<a href="/de/docs/Web/CSS/font-weight">font-weight</a>> ]?
<<a href="/de/docs/Web/CSS/font-size">font-size</a>>
[ / <<a href="/de/docs/Web/CSS/line-height">line-height</a>> ]?
<<a href="/de/docs/Web/CSS/font-family">font-family</a>>
]
| 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</pre>
<h2 id="Werte">Werte</h2>
<p>Wird <code>font</code> als Kurzform verwendet, siehe einzelne Eigenschaften für die unterschiedlichen Werteangaben.</p>
<h3 id="Werte_für_System-Fonts">Werte für System-Fonts</h3>
<dl>
<dt>caption</dt>
<dd>Schrift, die für Beschriftungen von Kontrollelementen (Buttons, Drop-Downs, etc.) verwendet wird.</dd>
<dt>icon</dt>
<dd>Schrift, die zur Beschriftung von Icons verwendet wird.</dd>
<dt>menu</dt>
<dd>Schrift die in Menüs benutzt wird.</dd>
<dt>message-box</dt>
<dd>Schrift die in Dialogboxen verwendet wird.</dd>
<dt>small-caption</dt>
<dd>Schrift die für kleine Kontrollelemente benutzt wird.</dd>
<dt>status-bar</dt>
<dd>Schrit die in Statusleisten benutzt wird.</dd>
</dl>
<h3 id="Mozilla_Erweiterungen_für_System-Fonts">Mozilla Erweiterungen für System-Fonts</h3>
<dl>
<dt>-moz-window</dt>
<dd>Schrift, die für den Inhalt in einem Fenster verwendet wird.</dd>
<dt>-moz-desktop</dt>
<dd>Schrift, die auf dem Desktop benutzt wird.</dd>
<dt>-moz-workspace</dt>
<dd>Schrift, die für ein Arbeitsplatz-Fenster verwendet wird.</dd>
<dt>-moz-document</dt>
<dd>Schrift, die für den Inhalt eines Dokumentes benutzt wird.</dd>
<dt>-moz-dialog</dt>
<dd>Schrift die in Dialogboxen verwendet wird (wie <code>message-box</code>).</dd>
<dt>-moz-button</dt>
<dd>Schrift, die für Beschriftungen von Kontrollelementen (Buttons, Drop-Downs, etc.) verwendet wird (wie <code>caption</code>).</dd>
<dt>-moz-pull-down-menu</dt>
<dd>Schrift, die für Aufklapp-Menüs benutzt wird.</dd>
<dt>-moz-list</dt>
<dd>Schrift, die in Listenmenüs verwendet wird.</dd>
<dt>-moz-field</dt>
<dd>Schrift, die in Textfeldern (z.B. <code>input</code>) verwendet wird.</dd>
<dt>-moz-info</dt>
<dd>?</dd>
</dl>
<h2 id="Beispiele">Beispiele</h2>
<p><a class="external" href="/samples/cssref/font.html" rel="external nofollow" title="https://developer.mozilla.org/samples/cssref/font.html">Link zum Live Beispiel</a></p>
<p id="Beispiel_1">Beispiel 1</p>
<pre>/* Setze die Schriftgröße auf 12px und die Zeilenhöhe auf 14px, sowie die Schriftart auf sans-serif */
p { font: 12px/14px sans-serif }
</pre>
<p id="Beispiel_2">Beispiel 2</p>
<pre>/* 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;
}
</pre>
<p id="Beispiel_3">Beispiel 3</p>
<pre>/* 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 }
</pre>
<p id="Beispiel_4">Beispiel 4</p>
<pre>/* Benutze die gleiche Schriftart wie die Statusleiste des Fensters. */
p { font: status-bar }
</pre>
<h2 id="Browser_Kompatibilität">Browser <span>Kompatibilität</span></h2>
<table class="standard-table">
<tbody>
<tr>
<th rowspan="2">Browser</th>
<th colspan="2">ab Version</th>
</tr>
<tr>
<th>Kurznotation</th>
<th>Systemschriften</th>
</tr>
<tr>
<td>Internet Explorer</td>
<td>3.0-4.0</td>
<td>4.0-5.5</td>
</tr>
<tr>
<td>Firefox (Gecko)</td>
<td>1.0 (1.0)</td>
<td>1.0 (1.0)</td>
</tr>
<tr>
<td>Opera</td>
<td>3.5</td>
<td>6.0</td>
</tr>
<tr>
<td>Safari (WebKit)</td>
<td>1.0 (85)</td>
<td>1.0 (85)</td>
</tr>
</tbody>
</table>
<h2 id="Spezifikation">Spezifikation</h2>
<ul>
<li><a class="external" href="http://www.w3.org/TR/css3-ui/#system0" lang="en">CSS 3 UI #System fonts</a></li>
<li><a class="external" href="http://www.w3.org/TR/CSS21/fonts.html#font-shorthand" lang="en" title="http://www.w3.org/TR/CSS21/fonts.html#font-shorthand">CSS 2.1 Fonts #font</a></li>
</ul>
<h2 id="Siehe_auch">Siehe auch</h2>
<ul>
<li><a href="/de/docs/Web/CSS/font-style"><code>font-style</code></a>, <a href="/de/docs/Web/CSS/font-variant"><code>font-variant</code></a>, <a href="/de/docs/Web/CSS/font-weight"><code>font-weight</code></a>, <a href="/de/docs/Web/CSS/font-size"><code>font-size</code></a>, <a href="/de/docs/Web/CSS/line-height"><code>line-height</code></a>, <a href="/de/docs/Web/CSS/font-family"><code>font-family</code></a></li>
<li><a href="/de/docs/Web/CSS/font-size-adjust"><code>font-size-adjust</code></a>, <a href="/de/docs/Web/CSS/font-stetch"><code>font-stetch</code></a></li>
<li><a href="/de/docs/Web/CSS/@font-face"><code>@font-face</code></a></li>
</ul>
|
