Signatur
Beschreibung
Die Eigenschaft HTMLFontElement.size spiegelt das HTML-Attribut size eines <font>-Elements wider. Der Wert ist immer ein String. Er kann eine absolute Größe von "1" bis "7" sein (Standard ist 3) oder eine relative Angabe wie "+2" bzw. "-1". Relative Werte beziehen sich auf die Basisgröße, die früher über <basefont> festgelegt wurde, und landen am Ende ebenfalls im Bereich 1–7.
Beim Lesen bekommt man genau den Text zurück, der im Attribut steht. Fehlt das Attribut, ist das ein leerer String. Setzt man die Eigenschaft, wird das Attribut geändert. Das hat denselben Effekt wie element.setAttribute("size", wert).
Sowohl das <font>-Element als auch diese Eigenschaft sind veraltet. Heute braucht man sie praktisch nur noch, um alte HTML-Inhalte zu lesen, zu analysieren oder in modernes Markup mit CSS umzuwandeln, etwa bei der Migration von Altinhalten oder in WYSIWYG-Editoren, die noch <font> erzeugen (z. B. über document.execCommand("fontSize")). In neuem Code legt man Schriftgrößen mit der CSS-Eigenschaft font-size fest.
Rückgabewert
size-Attributs, z. B. "4", "+1" oder "-2". Fehlt das Attribut, ist es ein leerer String "".Beispiele
Größe lesen und setzen
// Legacy-Markup: <font id="hinweis" size="2">Kleingedrucktes</font>
const font = document.getElementById('hinweis');
console.log(font.size); // aktueller Wert
font.size = '+2'; // relativ vergrößern
console.log(font.getAttribute('size'));Fehlendes Attribut erkennen
const font = document.createElement('font');
console.log(JSON.stringify(font.size)); // kein Attribut gesetzt
font.size = 5; // Zahl wird zu String
console.log(typeof font.size, font.size);
console.log(font.outerHTML);Migration: <font size> in CSS font-size umwandeln
// Übliche Zuordnung der HTML-Größen 1–7 zu CSS-Schlüsselwörtern
const sizeMap = {
1: 'x-small', 2: 'small', 3: 'medium', 4: 'large',
5: 'x-large', 6: 'xx-large', 7: 'xxx-large'
};
const toCssSize = (value) => {
const trimmed = value.trim();
if (!trimmed) return null;
let n = Number.parseInt(trimmed, 10);
if (Number.isNaN(n)) return null;
// Relative Angaben beziehen sich auf die Basisgröße 3
if (/^[+-]/.test(trimmed)) n = 3 + n;
n = Math.min(7, Math.max(1, n));
return sizeMap[n];
};
document.querySelectorAll('font[size]').forEach((font) => {
const span = document.createElement('span');
const css = toCssSize(font.size);
if (css) span.style.fontSize = css;
span.append(...font.childNodes);
font.replaceWith(span);
});
console.log(toCssSize('+2'), toCssSize('1'), toCssSize('9'));// Wichtig · Fallstricke
- Veraltet:
<font>ist seit HTML5 nicht mehr konform. Alle gängigen Browser unterstützen die Eigenschaft aus Kompatibilitätsgründen zwar noch, in neuem Code sollte man sie aber nicht verwenden. Nimm stattdessen CSS (font-size). - Immer ein String: Auch
font.size = 5wird als"5"gespeichert. Wer rechnen will, muss den Wert erst mitparseInt()umwandeln und dabei relative Werte wie"+1"gesondert behandeln. - Keine Prüfung des Werts: Ungültige Werte wie
"abc"oder"12"werden ohne Fehlermeldung ins Attribut geschrieben. Der Browser begrenzt sie beim Darstellen auf 1–7 oder ignoriert sie ganz. - Keine berechnete Größe:
sizegibt nur den Attributtext zurück, nicht die tatsächlich dargestellte Schriftgröße. Die bekommt man übergetComputedStyle(el).fontSize. CSS-Regeln haben Vorrang vor dem Attribut. <basefont>, auf das sich relative Werte früher bezogen haben, wird von modernen Browsern nicht mehr unterstützt. Die Basis ist praktisch immer 3.