Die Eigenschaft font ist eine Shorthand-Eigenschaft für die folgenden Eigenschaften:
Sie können alle Eigenschaften mit der folgenden Reihenfolge einstellen: 1. font-style, 2. font-variant, 3. font-weight, 4. font-size / line-height, 5. font-family.
Es ist erforderlich, die Werte für die Eigenschaften font-size und font-family zu definieren. Wenn einer der Werte fehlt, wird sein Standardwert verwendet.
| Anfangswert | Voreingestellte Werte der Eigenschaft |
| Gilt für | Alle Elemente. Es gilt auch für ::first-letter und ::first-line. |
| Geerbt | Ja |
| Animierbar | Ja, font-size, font-weight, font-stretch und line-height sind animierbar. |
| Version | CSS1 |
| DOM Syntax | Object.style.font = "talic normal bold 1em/140% "Lucida Grande", sans-serif"; |
Syntax
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
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
.font { font: italic normal bold 1em/140% "Lucida Grande", sans-serif;}
</style>
</head>
<body>
<h2>Ein Beispiel für die Eigenschaft Font</h2>
<p>Das ist ein normaler Absatz.</p>
<p class="font">Das ist ein Absatz mit spezifiziertem Schriftwert.</p>
</body>
</html>Ein anderes Beispiel ansehen:
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</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 ist ein Blindtext der Druck- und Satzindustrie.</p>
<p class="font2">Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie.</p>
<p class="font3">Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie.</p>
<p class="font4">Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie.</p>
<p class="font5">Lorem Ipsum ist ein Blindtext der Druck- und Satzindustrie.</p>
</body>
</html>Ein weiteres Beispiel für die Schriftanimation. In diesem Beispiel sind font-size, font-weight und line-height animierbar.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
.element {
border: 2px solid #666;
width: 350px;
height: 150px;
font: 20px "Fira Sans", sans-serif;
-webkit-animation: element 4s infinite; /* Chrome, Safari, Opera */
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>Ein Beispiel für Font animation</h2>
<div class="element">
<p>Ein Absatz</p>
</div>
</body>
</html>Werte
| Wert | Beschreibung |
|---|---|
| font-style | Definiert den Schriftstil. Der Standardwert ist normal. |
| font-variant | Definiert die Schriftartvariante. Der Standardwert ist normal. |
| font-weight | Definiert die Schriftart. 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 | Font, der für Beschriftungen von Controls (z. B. Buttons, Dropdowns) verwendet wird. |
| icon | Schriftart, die zur Beschriftung von Icons verwendet wird. |
| menu | Schriftart, die in Menüs verwendet wird (z. B. Dropdown-Menüs und Menülisten). |
| message-box | Schriftart, die in Dialogfeldern verwendet wird. |
| small-caption | Schriftart mit kleiner Beschriftung, die zur Kennzeichnung von kleinen Bedienelementen verwendet wird. |
| status-bar | Schriftart, die in den Fensterstatusleisten verwendet wird. |
| initial | Der Wert stellt die Eigenschaft auf seinen Standardwert ein. |
| inherit | Der Wert erbt die Eigenschaft von seinem übergeordneten Element. |
Übe dein Wissen
Welche Elemente können mit der CSS-Eigenschaft 'font' gestaltet werden?
Richtig!
Falsch!