CSS font-Eigenschaft
Die CSS-Eigenschaft font legt die Schrift eines Elements fest. Lernen Sie die Eigenschaften der font-Kurzschreibweise kennen und probieren Sie Beispiele aus.
Die font-Eigenschaft ist eine Kurzschreibweise für die folgenden Eigenschaften:
Sie können alle Eigenschaften in der folgenden Reihenfolge festlegen: 1. font-style, 2. font-variant, 3. font-weight, 4. font-stretch, 5. font-size / line-height, 6. font-family. Die Eigenschaft line-height wird verwendet, um den Abstand zwischen den Zeilen festzulegen.
Die Werte für font-size und font-family müssen zwingend angegeben werden. Fehlt einer dieser Werte, wird sein Standardwert verwendet.
Alle Einzelwerte der font-Kurzschreibweise, die nicht angegeben werden, werden auf ihren Anfangswert gesetzt.
| Eigenschaft | Beschreibung |
|---|---|
| Anfangswert | Standardwerte der Eigenschaften. |
| Gilt für | Alle Elemente. Gilt auch für ::first-letter und ::first-line. |
| Vererbt | Ja. |
| Animierbar | Ja. font-size, font-weight, font-stretch und line-height sind animierbar. |
| Version | CSS1 |
| DOM-Syntax | Object.style.font = "italic normal bold 1em/140% 'Lucida Grande', sans-serif"; |
font als Kurzschreibweise
Bei der Verwendung dieser Kurzschreibweise sollten Sie einige wichtige Dinge beachten:
Pflichtangaben
Die Werte für „font-size" und „font-family" gelten als Pflichtangaben. Die gesamte Deklaration wird ignoriert, wenn einer dieser Werte fehlt.
Optionale Werte
Die anderen fünf Werte sind optional. Wenn Sie einen dieser Werte verwenden, beachten Sie, dass sie in der Deklaration vor dem Wert „font-size" stehen müssen, andernfalls werden sie ignoriert.
Die Eigenschaften font und font-stretch
Die Eigenschaft font-stretch wird in allen modernen Browsern unterstützt.
Vererbung bei optionalen Werten
Wenn Sie die optionalen Werte weglassen, erben sie keine Werte von ihrem Elternelement. Sie werden auf ihren Anfangszustand zurückgesetzt.
Schlüsselwörter zur Definition von Systemschriften
Die folgenden Werte der font-Eigenschaft können als Schlüsselwörter verwendet werden:
- caption
- icon
- menu
- message-box
- small-caption
- status-bar
Sie setzen die Schrift auf diejenige, die das Betriebssystem des Benutzers für die jeweilige Kategorie verwendet. Wenn Sie beispielsweise den Wert „menu" angeben, wird die Schrift des Elements auf die Schrift gesetzt, die das Betriebssystem für Dropdown-Menüs und Menülisten verwendet.
Diese Schlüsselwortwerte können nur mit der font-Kurzschreibweise verwendet werden.
Syntax
Syntax der CSS-Eigenschaft font
font: font-style font-variant font-weight font-size/line-height font-family | caption | icon | menu | message-box | small-caption | status-bar | initial | inherit;Beispiel der font-Eigenschaft:
Beispiel der CSS-Eigenschaft font mit den Eigenschaften font-style, font-variant, font-weight, font-size, line-height und font-family
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.font {
font: italic normal bold 1em/140% "Lucida Grande", sans-serif;
}
</style>
</head>
<body>
<h2>Font property example</h2>
<p>This is some normal paragraph.</p>
<p class="font">This is a paragraph with specified font value.</p>
</body>
</html>Ergebnis
Beispiel der font-Eigenschaft mit kursiven Schriften:
Beispiele der CSS-Eigenschaft font mit den Eigenschaften font-family, font-size, font-variant und font-style
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.font1 {
font: italic small-caps bold 20px/1 cursive;
}
.font2 {
font: italic 1.2em "Fira Sans", serif;
}
.font3 {
font: 1.2em "Fira Sans", sans-serif;
}
.font4 {
font: small-caps bold 28px/1.5 sans-serif;
}
.font5 {
font: caption;
/* font: menu | icon | message-box | small-caption | status-bar;*/
}
</style>
</head>
<body>
<h2>Font property example</h2>
<p class="font1">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="font2">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="font3">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="font4">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="font5">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Beispiel der font-Eigenschaft, bei dem font-size, font-weight und line-height animierbar sind:
Beispiel einer Schriftanimation mit den Eigenschaften font-size, font-weight, font-stretch und line-height
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.element {
border: 2px solid #666;
width: 350px;
height: 150px;
font: 20px "Fira Sans", sans-serif;
-webkit-animation: element 4s infinite;
animation: element 4s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes element {
50% {
font: 50px bold;
}
}
/* Standard syntax */
@keyframes element {
50% {
font: 50px bold;
}
}
</style>
</head>
<body>
<h2>Font animation example</h2>
<div class="element">
<p>Some paragraph</p>
</div>
</body>
</html>Werte
| Wert | Beschreibung |
|---|---|
| font-style | Legt den Schriftstil fest. Der Standardwert ist normal. |
| font-variant | Legt die Schriftvariante fest. Der Standardwert ist normal. |
| font-weight | Legt die Schriftstärke fest. Der Standardwert ist normal. |
| font-size/line-height | Legt die Schriftgröße und den Zeilenabstand fest. Der Standardwert ist normal. |
| font-family | Legt die Schriftfamilie fest. Der Standardwert hängt vom Browser ab. |
| caption | Schrift, die für beschriftete Steuerelemente verwendet wird (z. B. Schaltflächen, Dropdown-Listen). |
| icon | Schrift, die zur Beschriftung von Symbolen verwendet wird. |
| menu | Schrift, die in Menüs verwendet wird (z. B. Dropdown-Menüs und Menülisten). |
| message-box | Schrift, die in Dialogfeldern verwendet wird. |
| small-caption | Schrift, die zur Beschriftung kleiner Steuerelemente verwendet wird. |
| status-bar | Schrift, die in Fenster-Statusleisten verwendet wird. |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. |
| inherit | Erbt die Eigenschaft vom Elternelement. |