CSS font-Eigenschaft
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 Zeilenabstand festzulegen.
Es ist erforderlich, Werte für die Eigenschaften font-size und font-family anzugeben. Wenn einer der Werte fehlt, wird der Standardwert verwendet.
Alle nicht angegebenen Einzelwerte der font-Kurzschreibweise-Eigenschaft werden auf ihren Anfangswert gesetzt.
| Property | Description |
|---|---|
| Anfangswert | Standardwerte der Eigenschaften. |
| Gilt für | Alle Elemente. Gilt auch für ::first-letter und ::first-line. |
| Vererbbar | 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-Eigenschaft sollten Sie einige wichtige Punkte beachten:
Erforderliche Werte
Die Werte „font-size“ und „font-family“ gelten als erforderlich. 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, da sie andernfalls ignoriert werden.
Die Eigenschaften font und font-stretch
Die Eigenschaft font-stretch wird in allen modernen Browsern unterstützt.
Die Vererbung für optionale Werte
Wenn Sie die optionalen Werte weglassen, erben sie keine Werte von ihrem übergeordneten Element. Sie werden auf ihren Anfangszustand zurückgesetzt.
Schlüsselwörter zur Definition von Systemschriftarten
Die folgenden Werte der font-Eigenschaft können als Schlüsselwörter verwendet werden:
- caption
- icon
- menu
- message-box
- small-caption
- status-bar
Sie legen die Schriftart auf diejenige fest, die im Betriebssystem des Benutzers für diese bestimmte Kategorie verwendet wird. Wenn Sie beispielsweise den Wert „menu“ angeben, wird für dieses Element dieselbe Schriftart verwendet, die im Betriebssystem für Dropdown-Menüs und Menülisten verwendet wird.
Diese Schlüsselwortwerte können nur mit der font-Kurzschreibweise-Eigenschaft verwendet werden.
Syntax
Syntax der CSS font-Eigenschaft
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 zur font-Eigenschaft:
Beispiel zur CSS font-Eigenschaft 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 zur font-Eigenschaft mit kursiven Schriftarten:
Beispiele zur CSS font-Eigenschaft 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 zur font-Eigenschaft, bei der font-size, font-weight und line-height animierbar sind:
Beispiel zur Font-Animation 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 | Definiert den Schriftstil. Der Standardwert ist normal. |
| font-variant | Definiert die Schriftvariante. Der Standardwert ist normal. |
| font-weight | Definiert die Schriftstärke. Der Standardwert ist normal. |
| font-size/line-height | Definiert die Schriftgröße und die Zeilenhöhe. Der Standardwert ist normal. |
| font-family | Definiert die Schriftfamilie. Der Standardwert hängt vom Browser ab. |
| caption | Schriftart, die für beschriftete Steuerelemente (z. B. Schaltflächen, Dropdowns) verwendet wird. |
| icon | Schriftart, die zur Beschriftung von Symbolen verwendet wird. |
| menu | Schriftart, die in Menüs (z. B. Dropdown-Menüs und Menülisten) verwendet wird. |
| message-box | Schriftart, die in Dialogfeldern verwendet wird. |
| small-caption | Schriftart, die zur Beschriftung kleiner Steuerelemente verwendet wird. |
| status-bar | Schriftart, die in der Statusleiste von Fenstern verwendet wird. |
| initial | Legt fest, dass die Eigenschaft ihren Standardwert verwendet. |
| inherit | Erbt die Eigenschaft von ihrem übergeordneten Element. |
Praxis
Welche Eigenschaften können Sie verwenden, um Schriftarten in CSS zu gestalten?