Signatur
Beschreibung
Die Eigenschaft HTMLFontElement.face spiegelt das HTML-Attribut face des veralteten <font>-Elements wider. Der Wert ist ein String mit einem oder mehreren Schriftnamen, getrennt durch Kommas, zum Beispiel "Arial, Helvetica, sans-serif". Der Browser nimmt die erste Schrift aus der Liste, die auf dem System verfügbar ist.
Lesen und Schreiben wirken direkt auf das Attribut: Wenn du face setzt, ändert sich getAttribute("face") genauso, und umgekehrt. Fehlt das Attribut, liefert die Eigenschaft einen leeren String "".
Brauchen wirst du die Eigenschaft praktisch nur, wenn du alten HTML-Code auswerten, bereinigen oder in modernes Markup umwandeln willst, etwa bei der Migration alter CMS-Inhalte. In neuem Code legst du Schriften mit CSS fest, also mit font-family oder element.style.fontFamily.
Rückgabewert
face-Attributs als kommagetrennte Liste von Schriftnamen. Fehlt das Attribut, ist der Wert ein leerer String "". Die Eigenschaft ist les- und schreibbar.Beispiele
Schriftliste eines <font>-Elements auslesen
// HTML: <font id="alt" face="Verdana, Arial, sans-serif">Alter Text</font>
const fontEl = document.getElementById('alt');
console.log(fontEl.face);
console.log(fontEl.face.split(',').map(s => s.trim()));face setzen und Attribut-Spiegelung prüfen
const fontEl = document.createElement('font');
console.log(JSON.stringify(fontEl.face)); // Attribut fehlt noch
fontEl.face = 'Georgia, serif';
console.log(fontEl.getAttribute('face'));
console.log(fontEl.outerHTML);Migration: <font> durch <span> mit CSS ersetzen
// Alle alten <font>-Elemente in <span>-Elemente mit font-family umwandeln
const migrateFontTags = (root = document) => {
root.querySelectorAll('font').forEach((fontEl) => {
const span = document.createElement('span');
if (fontEl.face) span.style.fontFamily = fontEl.face;
if (fontEl.color) span.style.color = fontEl.color;
span.append(...fontEl.childNodes);
fontEl.replaceWith(span);
});
};
document.body.innerHTML = '<p><font face="Courier New, monospace">Code</font></p>';
migrateFontTags();
console.log(document.body.innerHTML);// Wichtig · Fallstricke
- Veraltet:
<font>ist seit HTML 4.01 abgelöst und in HTML5 nicht mehr konform. Alle Browser unterstützenfacezwar weiterhin, aber nur damit alte Seiten funktionieren. Für neuen Code nimm CSS (font-family). - Keine Prüfung: Der Browser nimmt jeden String an und prüft weder die Schriftnamen noch deren Verfügbarkeit. Welche Schrift tatsächlich angezeigt wird, verrät
facenicht. Dafür gibt esgetComputedStyle(el).fontFamilybzw.document.fonts.check(). - CSS gewinnt: Das Attribut wird wie eine CSS-Regel mit geringster Spezifität behandelt. Jede Autoren-CSS-Regel mit
font-familyüberschreibt es. - Anführungszeichen: Schriftnamen mit Leerzeichen werden im Attribut ohne CSS-Anführungszeichen gespeichert. Überträgst du sie auf
style.fontFamily, setzt der Browser die Anführungszeichen bei der Serialisierung meist selbst. - Der Wert wird nicht bereinigt. Wenn du Nutzereingaben in
faceoder infont-familyübernimmst, lass sie nur als Wert zuweisen und bau sie nicht perinnerHTMLzusammen, sonst droht XSS.