diff options
Diffstat (limited to 'files/de/web/css/font/index.html')
| -rw-r--r-- | files/de/web/css/font/index.html | 176 |
1 files changed, 176 insertions, 0 deletions
diff --git a/files/de/web/css/font/index.html b/files/de/web/css/font/index.html new file mode 100644 index 0000000000..6e0fecf56b --- /dev/null +++ b/files/de/web/css/font/index.html @@ -0,0 +1,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> |