W3docs
de
Anmelden

HTML <font>-Tag

Das veraltete <font>-Tag setzte Textgröße, Schriftart und Farbe. Erfahren Sie, warum es in HTML5 entfernt wurde und wie CSS es ersetzt.

Das <font>-Tag wurde verwendet, um Größe, Farbe und Schriftart von Text über die Attribute size, color und face zu steuern. Diese Seite erklärt, warum Sie es in neuem Code niemals verwenden sollten, wie man veraltetes <font>-Markup liest und wie man jedes Attribut durch modernes CSS ersetzt.

Gefahr

Das <font>-Tag ist veraltet. Es wurde aus dem HTML5-Standard entfernt und ist ein veraltetes HTML-Tag. Verwenden Sie es nicht. Gestalten Sie Text stattdessen mit CSS.

Warum <font> veraltet ist

<font> wurde als veraltet eingestuft, weil es Präsentation (wie Text aussieht) mit Inhalt (dem Text selbst) vermischt. Moderne Webentwicklung trennt diese Belange: HTML beschreibt Struktur und Bedeutung, während CSS das Erscheinungsbild beschreibt. Diese Trennung hält Dokumente kleiner, macht das Aussehen einer Website leicht an einer Stelle änderbar und verbessert Zugänglichkeit und Wartbarkeit.

Praktische Konsequenzen der heutigen Verwendung von <font>:

  • Der Standard bietet kein Standard-Rendering für <font>. Browser können seine veralteten Effekte aus Gründen der Rückwärtskompatibilität noch anzeigen, aber dieses Verhalten ist nicht garantiert und kann sich ändern oder ignoriert werden.
  • Das Wiederholen von <font> für jedes Element bläht Ihr Markup auf. Eine einzige CSS-Regel kann Hunderte von Elementen gleichzeitig gestalten.
  • Es kann nicht responsiv gesteuert, mit Themes versehen oder sauber überschrieben werden, wie es bei CSS-Klassen möglich ist.

Wenn Sie <font> in einer bestehenden Codebasis finden, behandeln Sie es als etwas, das migriert werden soll – nicht als etwas, das erweitert werden soll.

Veraltete Syntax

Das <font>-Tag kam paarweise – der Inhalt stand zwischen dem öffnenden <font>- und dem schließenden </font>-Tag.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p>
      <font size="2" color="#1c87c9">Blue text</font>
    </p>
    <p>
      <font size="3" color="red">Red text, font size increased.</font>
    </p>
    <p>
      <font face="arial" color="#8ebf42">Green text, typeface changed.</font>
    </p>
  </body>
</html>
Probier es selbst »

Ergebnis

font tag example

Das size-Attribut und seine Skala von 1 bis 7

Anders als CSS akzeptierte das size-Attribut von <font> keine Pixel oder andere Einheiten. Es akzeptierte eine Zahl von 1 bis 7, wobei 1 die kleinste und 7 die größte ist und 3 der Standard ist. Werte konnten auch relativ sein, z. B. size="+2" oder size="-1", was relativ zur Basisgröße angepasst wurde.

Diese feste Skala entsprach grob den folgenden CSS-font-size-Werten:

<font size>Ungefähre CSS-font-size
1x-small (~10px)
2small (~13px)
3medium (~16px, Standard)
4large (~18px)
5x-large (~24px)
6xx-large (~32px)
7~48px

Dies sind grobe Entsprechungen – die genauen Pixelgrößen hängen vom Browser und der Basis-Schriftgröße des Benutzers ab. Mit CSS sind Sie nicht mehr auf sieben Stufen beschränkt; Sie können jede Größe in px, em, rem, % oder als Schlüsselwort festlegen.

Zuordnung von Attributen zu CSS

Jedes <font>-Attribut hat einen direkten, besseren CSS-Ersatz:

<font>-AttributCSS-EigenschaftBeispiel
colorcolorcolor: #1c87c9;
facefont-familyfont-family: Arial, sans-serif;
sizefont-sizefont-size: 18px;

Der moderne CSS-Ansatz

Der empfohlene Ansatz ist, Ihr HTML sauber zu halten und das Styling in einem <style>-Block (oder einem externen Stylesheet) mit Klassenselektoren zu platzieren. Auf diese Weise kann eine Regel jedes passende Element gestalten, und eine spätere Änderung des Designs bedeutet, CSS an einer Stelle zu bearbeiten.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .blue-text {
        color: #1c87c9;
        font-size: 16px;
      }
      .red-text {
        color: red;
        font-size: 18px;
      }
      .green-text {
        color: #8ebf42;
        font-size: 18px;
        font-family: Arial, sans-serif;
      }
    </style>
  </head>
  <body>
    <p class="blue-text">Blue text.</p>
    <p class="red-text">Red text, font size increased.</p>
    <p class="green-text">Green text, typeface changed.</p>
  </body>
</html>
Probier es selbst »

Migration von veralteten <font>-Code

So konvertieren Sie altes <font>-Markup in modernes HTML und CSS:

  1. Entfernen Sie den <font>-Wrapper und behalten Sie seinen inneren Inhalt in einem semantischen Element wie <p>, <span> oder einer Überschrift.
  2. Übersetzen Sie jedes Attribut in seine CSS-Eigenschaft mithilfe der obigen Zuordnungstabelle (color → color, face → font-family, size → font-size).
  3. Konvertieren Sie die size-Zahl in eine echte CSS-Größe mithilfe der 1–7-Tabelle – zum Beispiel wird size="5" zu font-size: 24px; (oder x-large).
  4. Fassen Sie wiederholtes Styling in einer Klasse zusammen, in einem <style>-Block oder externen Stylesheet, damit es wiederverwendet werden kann, anstatt jedes Element einzeln zu gestalten.

Zum Beispiel wird <font size="5" color="red" face="arial">Sale!</font> zu:

<style>
  .sale {
    font-size: 24px;
    color: red;
    font-family: Arial, sans-serif;
  }
</style>
<span class="sale">Sale!</span>

Attribute

AttributWertBeschreibung
colorrgb (x, x, x) #xxxxxx colornameLegt die Farbe des Textes fest. Verwenden Sie stattdessen CSS color.
facefont_familyLegt die Schriftart fest. Verwenden Sie stattdessen CSS font-family.
sizenumber (1–7)Legt die Größe des Textes fest. Verwenden Sie stattdessen CSS font-size.

Verwandte Ressourcen

Übungen

Übung
Welche ist die richtige moderne Alternative zur Textgestaltung anstelle des veralteten HTML-font-Tags?
Welche ist die richtige moderne Alternative zur Textgestaltung anstelle des veralteten HTML-font-Tags?
Was this page helpful?