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
177
178
179
180
181
182
183
184
185
|
---
title: font-family
slug: Web/CSS/font-family
tags:
- CSS
- CSS Eigenschaft
- CSS Schriftarten
- Layout
- Referenz
- Web
translation_of: Web/CSS/font-family
---
<div>{{CSSRef}}</div>
<h2 id="Übersicht">Übersicht</h2>
<p>Die <code>font-family</code> CSS Eigenschaft erlaubt es, eine priorisierte Liste von Schriftfamiliennamen und/oder generische Familiennamen für ein ausgewähltes Element anzugeben. Im Gegensatz zu den meisten anderen CSS Eigenschaften werden die Werte durch Komma getrennt, um zu kennzeichnen, dass sie Alternativen darstellen. Der Browser wählt die erste Schrift, die auf dem Computer installiert ist oder mittels der Informationen, die über eine {{cssxref("@font-face")}} At-Regel gegeben sind, heruntergeladen werden kann.</p>
<p>Webautoren sollten einer Schriftfamilienliste immer mindestens eine generische Familie hinzufügen, da es keine Garantie dafür gibt, dass eine bestimmte Schriftart auf dem Computer installiert ist oder über die {{cssxref("@font-face")}} At-Regel heruntergeladen werden kann. Die generische Schriftart erlaubt es dem Browser, falls nötig, eine akzeptable Ersatzschriftart auszuwählen.</p>
<p>Es ist oft vorteilhaft, die Kurzform Eigenschaft {{cssxref("font")}} zu verwenden, um <code>font-size</code> und andere Schrift bezogene Eigenschaften auf einmal zu setzen.</p>
<div class="note"><strong>Hinweis:</strong> Die <code>font-family</code> Eigenschaft definiert eine Liste von Schriftarten, von der höchsten zur niedrigsten Priorität. Die Auswahl der Schriftart stoppt <strong>nicht</strong> einfach bei der ersten Schriftart in der Liste, die auf dem System des Benutzers installiert ist. Vielmehr findet die Auswahl der Schriftart <strong>pro Zeichen</strong> statt, so dass, falls eine verfügbare Schriftart ein bestimmtes Schriftzeichen nicht definiert, in den übrigen Schriftarten nach diesem Zeichen gesucht wird. Dies funktioniert jedoch nicht im Internet Explorer 6 oder früheren Versionen.<br>
<br>
Falls eine Schrift nur in bestimmten <a href="/de/docs/Web/CSS/font-style" title="CSS/font-style">Stilen</a>, <a href="/de/docs/Web/CSS/font-variant" title="CSS/font-variant">Varianten</a> oder <a href="/de/docs/Web/CSS/font-size" title="CSS/font-size">Größen</a> verfügbar ist, können diese Eigenschaften auch beeinflussen, welche Schriftart ausgewählt wird.</div>
<p>{{cssinfo}}</p>
<h2 id="Syntax">Syntax</h2>
<pre class="twopartsyntaxbox"><a href="/de/docs/Web/CSS/Wertdefinitionssyntax" title="CSS/Value_definition_syntax">Formale Syntax</a>: {{csssyntax("font-family")}}
</pre>
<pre>font-family: Gill Sans Extrabold, sans-serif
font-family: "Goudy Bookletter 1911", sans-serif
font-family: serif
font-family: sans-serif
font-family: monospace
font-family: cursive
font-family: fantasy
font-family: inherit
</pre>
<h3 id="Werte">Werte</h3>
<table class="standard-table" style="height: 523px; width: 1145px;">
<tbody>
<tr>
<td><code><family-name></code></td>
<td>Der Name der Schriftfamilie. Zum Beispiel "Times" und "Helvetica" sind Schriftfamilien. Schriftfamiliennamen, die Leerzeichen enthalten, sollten von Anführungszeichen eingeschlossen werden.</td>
</tr>
<tr>
<td><code><generic-name></code></td>
<td>
<p>Generische Schriftfamilien dienen als Fallback-Mechanismus, ein Mittel, um etwas von der Absicht des Stylesheet Autors zu erhalten für den Fall, wenn keine der angegebenen Schriftarten verfügbar sind. Generische Familiennamen sind Schlüsselwörter und dürfen nicht in Anführungszeichen eingeschlossen werden. Eine generische Schriftfamilie sollte die letzte Alternative in einer Liste von Schriftfamiliennamen sein.</p>
<dl>
<dt><code>serif</code></dt>
<dd style='font-family: Palatino,"Palatino Linotype",Palladio,"URW Palladio",serif;'>Schriftzeichen haben abschließende Striche, ausgeweitete oder zugespitzte Enden oder serifenbetonte Enden.<br>
Z. B. Palatino, "Palatino Linotype", Palladio, "URW Palladio", serif</dd>
<dt><code>sans-serif</code></dt>
<dd style='font-family: "Trebuchet MS","Liberation Sans","Nimbus Sans L",sans-serif;'>Schriftzeichen haben gerade Strichenden.<br>
Z. B. 'Trebuchet MS', 'Liberation Sans', 'Nimbus Sans L', sans-serif</dd>
<dt><code>monospace</code></dt>
<dd style='font-family: "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace;'>Alle Schriftzeichen haben die gleiche Breite.<br>
Z. B. "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace</dd>
<dt><code>cursive</code></dt>
<dd>Schriftzeichen in kursiven Schriftarten haben üblicherweise verbindende Striche oder andere kursive Charakteristiken, die über die von kursiven Schriftzügen hinausgehen. Die Schriftzeichen sind teilweise oder ganz verbunden und das Ergebnis ähnelt eher einer Handschrift als gedruckten Lettern.</dd>
<dt><code>fantasy</code></dt>
<dd>Fantasie Schriftarten sind überwiegend dekorative Schriftarten, die verspielte Darstellungen von Schriftzeichen beinhalten.</dd>
</dl>
</td>
</tr>
</tbody>
</table>
<h3 id="Gültige_Schriftfamiliennamen">Gültige Schriftfamiliennamen</h3>
<p>Schriftfamiliennamen müssen entweder in Anführungszeichen eingeschlossene Strings sein oder nicht angeführte als eine Aneinanderreihung von einem oder mehreren Bezeichnern. Das heißt dass in nicht angeführten Schriftfamiliennamen Interpunktionszeichen und Ziffern am Anfang jedes Zeichens Maskiert (escaped) werden müssen.</p>
<p>Beispielsweise sind die folgenden Angaben gültig:</p>
<pre>font-family: Gill Sans Extrabold, sans-serif;
font-family: "Goudy Bookletter 1911", sans-serif;</pre>
<p>Die folgenden Angaben sind <strong>ungültig</strong>:</p>
<pre>font-family: Goudy Bookletter 1911, sans-serif;
font-family: Red/Black, sans-serif;
font-family: "Lucida" Grande, sans-serif;
font-family: Ahem!, sans-serif;
font-family: test@foo, sans-serif;
font-family: #POUND, sans-serif;
font-family: Hawaii 5-0, sans-serif;</pre>
<h2 id="Beispiele">Beispiele</h2>
<h3 id="Beispiel_1">Beispiel 1</h3>
<pre>body { font-family: "Gill Sans Extrabold", Helvetica, sans-serif }
.receipt { font-family: Courier, "Lucida Console", monospace }
</pre>
<h3 id="Beispiel_2">Beispiel 2</h3>
<pre class="brush: css">.exampleserif {
font-family: Times, "Times New Roman", Georgia, serif;
}
.examplesansserif {
font-family: Verdana, Arial, Helvetica, sans-serif;
}
.examplemonospace {
font-family: "Lucida Console", Courier, monospace;
}
.examplecursive {
font-family: cursive;
}
.examplefantasy {
font-family: fantasy;
}
</pre>
<pre class="brush: html"><div class="exampleserif">
Dies ist ein Beispiel für eine Serifenschrift.
</div>
<div class="examplesansserif">
Dies ist ein Beispiel für eine serifenlose Schrift.
</div>
<div class="examplemonospace">
Dies ist ein Beispiel für eine nicht-proportionale Schrift.
</div>
<div class="examplecursive">
Dies ist ein Beispiel für eine kursive Schrift.
</div>
<div class="examplefantasy">
Dies ist ein Beispiel für eine Fantasieschrift.
</div></pre>
<h4 id="Live_Beispiel">Live Beispiel</h4>
<p>{{ EmbedLiveSample('Beispiel_2','600','120') }}</p>
<h2 id="Spezifikation">Spezifikation</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spezifikation</th>
<th scope="col">Status</th>
<th scope="col">Kommentar</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Fonts', '#font-family-prop', 'font-family')}}</td>
<td>{{Spec2('CSS3 Fonts')}}</td>
<td>Keine wesentlichen Änderungen</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-family', 'font-family')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>Keine wesentlichen Änderungen</td>
</tr>
<tr>
<td>{{SpecName('CSS1', '#font-family', 'font-familiy')}}</td>
<td>{{Spec2('CSS1')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Browser_Kompatibilität">Browser Kompatibilität</h2>
{{Compat("css.properties.font-family")}}
|
