W3docs
de
Anmelden

CSS font-size-Eigenschaft

Die font-size-Eigenschaft legt die Schriftgröße fest und beeinflusst auch die Berechnung von em, ex und anderen relativen Längeneinheiten.

Die CSS-Eigenschaft font-size legt die Größe des Textes fest. Sie gehört zu den am häufigsten verwendeten Typografie-Eigenschaften, und da Einheiten wie em, ex und % relativ zu ihr berechnet werden, beeinflusst der gewählte Wert auch die Größe anderer Elemente, die von ihr abhängen.

Diese Seite behandelt alle Möglichkeiten zur Angabe einer Schriftgröße — Schlüsselwörter, Längen und Prozentwerte — erklärt, wie die relativen Einheiten (em, rem, ex, vw/vh) berechnet werden, und zeigt, welcher Ansatz wann geeignet ist.

Möglichkeiten zur Angabe der Schriftgröße

Es gibt vier grundlegende Möglichkeiten, font-size festzulegen:

  • absolute-size — ein festes Schlüsselwort aus einer integrierten Skala.
  • relative-size — ein Schlüsselwort, das den geerbten Wert nach oben oder unten anpasst.
  • length — eine explizite Zahl mit einer Einheit.
  • percentage — ein Wert relativ zur Schriftgröße des Elternelements.

Die absolute-size-Schlüsselwörter entsprechen einer fest definierten Skala des Browsers:

  • xx-small
  • x-small
  • small
  • medium (der Anfangswert)
  • large
  • x-large
  • xx-large

Die relative-size-Schlüsselwörter passen die Größe vom geerbten Wert aus nach oben oder unten an:

  • smaller
  • larger

Längen können relativ (em, ex, rem, ch, vw, vh, px) oder absolut (in, cm, mm, pt, pc) sein. Ein Prozentwert legt die Schriftgröße relativ zur Schriftgröße des Elternelements fest — 150% entspricht dem Anderthalbfachen der Elterngröße.

Welche Einheit sollte ich verwenden?

  • Verwenden Sie rem für die meisten Texte. Diese Einheit skaliert mit der Browser-Schriftgröße des Nutzers (gut für Barrierefreiheit) und bleibt dabei vorhersehbar, da sie immer relativ zum Wurzelelement ist, nicht zum Elternelement.
  • Verwenden Sie em, wenn der Abstand oder der Kindtext einer Komponente zusammen mit der eigenen Schriftgröße der Komponente skalieren soll.
  • Vermeiden Sie Pixelwerte (px) für Fließtext, wenn Barrierefreiheit wichtig ist: Feste Pixel ignorieren die vom Nutzer bevorzugte Standardgröße.
Anfangswertmedium
Gilt fürAlle Elemente. Gilt auch für ::first-letter und ::first-line.
VererbbarJa.
AnimierbarJa.
VersionCSS1
DOM-Syntaxobject.style.fontSize = "15px";

Syntax

Syntax der CSS font-size-Eigenschaft

font-size: medium | xx-small | x-small | small | large | x-large | xx-large | smaller | larger | length | initial | inherit;

Beispiel der font-size-Eigenschaft:

Beispiel der CSS font-size-Eigenschaft mit px, em, pt, x-small und %(Prozentwert)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        font-size: 24pt;
      }
      h3 {
        font-size: 26px;
      }
      p {
        font-size: 1em;
      }
      a {
        font-size: 100%;
      }
      span {
        font-size: x-small;
      }
    </style>
  </head>
  <body>
    <span>This span is written with x-small value.</span>
    <p>This paragraph is written with 1em font-size.</p>
    <a href="https://www.w3docs.com/">This hyperlink is written with 100% font-size.</a>
    <h3>We used x-small font size for this heading.</h3>
    <h1>We set the font size 24pt  for this heading.</h1>
  </body>
</html>
Probier es selbst »

Ergebnis

CSS font-size-Eigenschaft

Verwendung von Prozentwerten

Prozentwerte sind relativ zur Schriftgröße des Elternelements. Im folgenden Beispiel beträgt die Überschrift 125%, wird also mit dem Anderthalbfachen der geerbten Körperschriftgröße dargestellt:

Beispiel der font-size-Eigenschaft mit Prozentwert:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h3 {
        font-size: 125%;
      }
    </style>
  </head>
  <body>
    <h3>This heading is 125% of the body font size.</h3>
    <span>This span uses the default (inherited) size.</span>
    <p>This paragraph uses the default (inherited) size.</p>
  </body>
</html>

Verwendung der em-Einheit

Die em-Einheit gilt als relative Einheit. Sie basiert auf dem berechneten Wert der Schriftgröße des Elternelements. Im folgenden Code beträgt der Absatz 32px, da 2×16=32, und die Überschrift hat eine Schriftgröße von 48px, da 3×16=48px. Diese Methode ist sehr nützlich, da alle untergeordneten Elemente stets zueinander relativ bleiben.

Beispiel der font-size-Eigenschaft mit dem Wert "em":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .container {
        font-size: 16px;
      }
      p {
        font-size: 2em;
      }
      h2 {
        font-size: 3em;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h2>Here is the heading</h2>
      <p>Here is the text.</p>
    </div>
  </body>
</html>
Probier es selbst »

Verwendung der rem-Einheit

Mit der rem-Einheit ist die Schriftgröße immer relativ zum Wurzelelement <html>, unabhängig davon, wie tief das Element verschachtelt ist. Im folgenden Beispiel ist die Wurzel 16px, sodass die Überschrift 1.5rem = 1,5 × 16 = 24px beträgt. Da jedes rem auf denselben Wurzelwert zeigt, wird das Stacking-Problem vermieden, das em-Einheiten bei verschachtelten Elementen verursachen können.

Beispiel der font-size-Eigenschaft mit dem Wert "rem":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      html {
        font-size: 16px;
      }
      h2 {
        font-size: 1.5rem;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h2>Here is the heading</h2>
      <p>Here is the text.</p>
    </div>
  </body>
</html>
Probier es selbst »

Verwendung der ex-Einheit

Mit der ex-Einheit entspricht 1ex der x-Höhe — der Höhe des Kleinbuchstabens „x" — der aktuellen Schriftart des Elements. Da die x-Höhe je nach Schriftart variiert, hängt eine ex-basierte Größe von der verwendeten Schriftart ab, was sie weniger vorhersehbar macht als em oder rem. Im folgenden Beispiel wird der Text auf das 15-fache der x-Höhe gesetzt.

CSS font-size-Eigenschaft

.exunit {
  font-size: 15ex;
}

Verwendung von viewport-Einheiten

Viewport-Einheiten (vw und vh) werden verwendet, um die Schriftgröße eines Elements relativ zur Größe des viewport festzulegen.

  • 1vw = 1 % der viewport-Breite
  • 1vh = 1 % der viewport-Höhe

CSS font-size-Eigenschaft

.viewport {
  font-size: 120vh;
}

Beispiel der font-size-Eigenschaft mit dem Wert "length":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      span {
        color: green;
        font-size: 2vh;
      }
      p {
        color: red;
        font-size: 1em;
      }
      .length {
        color: orange;
        font-size: 30px;
      }
      h3 {
        color: lightblue;
        font-size: 3ex;
      }
      h1 {
        color: purple;
        font-size: 24pt;
      }
      a {
        color: blue;
        font-size: 120%;
      }
    </style>
  </head>
  <body>
    <h2>Font-size property</h2>
    <span>This text is written with 2vh font-size.</span>
    <p>This paragraph is written with 1em font-size.</p>
    <div class="length">Example with 30px font-size length </div>
    <h3>Example with 3ex font-size length.</h3>
    <h1>We set the font size 24pt  for this heading.</h1>
    <a href="https://www.w3docs.com/">This hyperlink is written with 100% font-size.</a>
  </body>
</html>
Probier es selbst »

Beispiel der font-size-Eigenschaft mit absolute-size-Werten:

Beispiel der font-size-Eigenschaft (absolute-size):

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .font-xxsmall {
        color: grey;
        font-size: xx-small;
      }
      .font-xsmall {
        color: grey;
        font-size: x-small;
      }
      .font-small {
        color: grey;
        font-size: small;
      }
      .font-medium {
        color: grey;
        font-size: medium;
      }
      .font-large {
        color: grey;
        font-size: large;
      }
      .font-xlarge {
        color: grey;
        font-size: x-large;
      }
      .font-xxlarge {
        color: grey;
        font-size: xx-large;
      }
    </style>
  </head>
  <body>
    <h1>Font-size property</h1>
    <div class="font-xxsmall">Example with font-size xx-small property</div>
    <div class="font-xsmall">Example with font-size x-small property</div>
    <div class="font-small">Example with font-size small property</div>
    <div class="font-medium">Example with font-size medium property</div>
    <div class="font-large">Example with font-size large property</div>
    <div class="font-xlarge">Example with font-size x-large property</div>
    <div class="font-xxlarge">Example with font-size xx-large property</div>
  </body>
</html>
Probier es selbst »

Beispiel der font-size-Eigenschaft mit den Werten "smaller" und "larger":

Beispiel der font-size-Eigenschaft mit den Werten "smaller" und "larger":

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .smaller {
        color: red;
        font-size: smaller;
      }
      .larger {
        color: red;
        font-size: larger;
      }
    </style>
  </head>
  <body>
    <h1>font-size property</h1>
    <div class="smaller">Example with font-size smaller property</div>
    <div class="larger">Example with font-size larger property</div>
  </body>
</html>
Probier es selbst »

Werte

WertBeschreibungAusprobieren
mediumSetzt die font-size auf medium. Dies ist der Standardwert dieser Eigenschaft.Ausprobieren »
xx-smallSetzt die font-size auf xx-small.Ausprobieren »
x-smallSetzt die font-size auf x-small.Ausprobieren »
smallSetzt die font-size auf small.Ausprobieren »
largeSetzt die font-size auf large.Ausprobieren »
x-largeSetzt die font-size auf x-large.Ausprobieren »
xx-largeSetzt die font-size auf xx-large.Ausprobieren »
smallerVerkleinert die font-size.Ausprobieren »
largerVergrößert die font-size.Ausprobieren »
lengthLegt die font-size in px, em usw. fest.Ausprobieren »
%Setzt die font-size auf einen Prozentwert der Schriftgröße des Elternelements.Ausprobieren »
initialSetzt die Eigenschaft auf ihren Standardwert zurück.Ausprobieren »
inheritErbt die Eigenschaft vom Elternelement.

Verwandte Eigenschaften

Um die restliche Typografie eines Elements zu steuern, kombinieren Sie font-size mit diesen Eigenschaften:

  • font-family — Schriftart wählen.
  • font-weight — Schriftstärke festlegen.
  • font-style — kursive oder schräge Darstellung anwenden.
  • line-height — vertikalen Zeilenabstand steuern.
  • font — die Kurzschreibweise, die mehrere dieser Eigenschaften auf einmal setzt.

Übung

Übung
Welche Einheiten können verwendet werden, um die Eigenschaft 'font-size' in CSS festzulegen?
Welche Einheiten können verwendet werden, um die Eigenschaft 'font-size' in CSS festzulegen?
Was this page helpful?