CSS-Eigenschaft font

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?
Finden Sie das nützlich?