---
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">[
  [ &lt;<a href="/de/docs/Web/CSS/font-style">font-style</a>&gt; || &lt;<a href="/de/docs/Web/CSS/font-variant">font-variant</a>&gt; || &lt;<a href="/de/docs/Web/CSS/font-weight">font-weight</a>&gt; ]?
  &lt;<a href="/de/docs/Web/CSS/font-size">font-size</a>&gt;
  [ / &lt;<a href="/de/docs/Web/CSS/line-height">line-height</a>&gt; ]?
  &lt;<a href="/de/docs/Web/CSS/font-family">font-family</a>&gt;
]
| 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>