HTMLFontElement — Schnittstelle · JavaScript-Referenz

Signatur

interface HTMLFontElement extends HTMLElement

Beschreibung

HTMLFontElement ist die DOM-Schnittstelle für das Element . Sie erbt alle Eigenschaften und Methoden von HTMLElement und ergänzt drei Eigenschaften, die die gleichnamigen HTML-Attribute widerspiegeln:

color – Textfarbe als Farbname oder Hex-Wert, z. B. "red" oder "#ff0000".
face – kommagetrennte Liste von Schriftfamilien, z. B. "Arial, sans-serif".
size – Schriftgröße als Zahl von 1 bis 7 oder relativ wie "+2" bzw. "-1", jeweils als String.

Das Element  ist seit HTML 4.01 veraltet und in HTML5 nicht mehr zulässig. Die Schnittstelle gibt es trotzdem weiter, damit alte Dokumente funktionieren. Heute begegnet sie dir vor allem, wenn du alten Code oder Inhalte aus WYSIWYG-Editoren verarbeitest. Das betrifft etwa HTML, das mit document.execCommand("foreColor") erzeugt wurde, oder eingefügte Inhalte aus E-Mails und Textverarbeitungen.

Für neuen Code solltest du  nicht mehr verwenden. Formatiere Text stattdessen mit CSS, also über Klassen, element.style oder die Eigenschaften color, font-family und font-size. Ein typischer Anwendungsfall für HTMLFontElement ist deshalb das Aufräumen alter Inhalte: -Elemente finden, ihre Attribute auslesen und durch  mit CSS ersetzen.

Parameter

Name	Typ	Default	Beschreibung
$color	string	""	Eigenschaft: spiegelt das HTML-Attribut `color` wider (Farbname oder Hex-Wert). Lesen und Schreiben möglich.
$face	string	""	Eigenschaft: spiegelt das HTML-Attribut `face` wider (kommagetrennte Liste von Schriftfamilien). Lesen und Schreiben möglich.
$size	string	""	Eigenschaft: spiegelt das HTML-Attribut `size` wider, `"1"`–`"7"` oder relativ wie `"+1"`/`"-2"`. Der Wert ist immer ein String, keine Zahl.

Rückgabewert

Typ

HTMLFontElement

Beschreibung

Das zurückgegebene Objekt stellt ein -Element dar, etwa aus document.createElement("font") oder querySelector("font").

Beispiele

Element erzeugen und Attribute setzen

// Nur zur Veranschaulichung – in neuem Code CSS verwenden!
const font = document.createElement("font");
font.color = "#c00";
font.face = "Georgia, serif";
font.size = "4";
font.textContent = "Veralteter Hinweistext";
document.body.append(font);

console.log(font instanceof HTMLFontElement);
console.log(font.outerHTML);

true Veralteter Hinweistext

Attribute eines vorhandenen font-Elements auslesen

document.body.innerHTML = '<font color="blue" size="+2">Alt</font>';

const el = document.querySelector("font");
console.log(el.color);        // "blue"
console.log(el.size);         // "+2" (String!)
console.log(el.face === ""); // true – Attribut fehlt

blue +2 true

Alte font-Elemente durch span mit CSS ersetzen

// size 1–7 grob auf CSS-Schlüsselwörter abbilden
const sizeMap = {
  1: "x-small", 2: "small", 3: "medium", 4: "large",
  5: "x-large", 6: "xx-large", 7: "xxx-large"
};

const modernizeFonts = (root = document) => {
  for (const font of root.querySelectorAll("font")) {
    const span = document.createElement("span");
    if (font.color) span.style.color = font.color;
    if (font.face) span.style.fontFamily = font.face;
    // Relative Größen ("+1") auf Basisgröße 3 beziehen
    const raw = font.size.trim();
    if (raw) {
      const n = /^[+-]/.test(raw) ? 3 + Number(raw) : Number(raw);
      const clamped = Math.min(7, Math.max(1, n || 3));
      span.style.fontSize = sizeMap[clamped];
    }
    span.append(...font.childNodes);
    font.replaceWith(span);
  }
};

document.body.innerHTML = '<p><font color="red" size="5">Achtung</font></p>';
modernizeFonts();
console.log(document.body.innerHTML);

Achtung

// Wichtig · Fallstricke

Veraltet:  ist in HTML5 nicht mehr zulässig und fällt bei der Validierung durch. Browser unterstützen Element und Schnittstelle nur noch, damit alte Seiten weiter funktionieren. Für neue Seiten ist CSS der richtige Weg.

size ist immer ein String. Für Berechnungen musst du ihn umwandeln, z. B. mit Number(el.size). Achte dabei auf relative Werte wie "+1".
CSS hat Vorrang vor den -Attributen. Die Attribute gelten nur als sogenannte Präsentationshinweise und werden von jeder CSS-Regel überschrieben.
document.execCommand() erzeugt in manchen Browsern noch -Elemente. Mit document.execCommand("styleWithCSS", false, true) entstehen stattdessen -Elemente. Auch execCommand selbst ist veraltet.
Sicherheit: Wenn du eingefügtes Fremd-HTML aufräumst, bereinige es zusätzlich, z. B. mit DOMPurify. Das Ersetzen von -Elementen allein schützt nicht vor XSS.

Siehe auch

HTMLMenuElement HTMLFormElement HTMLBodyElement HTMLLinkElement HTMLModElement