Fettschrift aus HTML-Text entfernen

Um ausgewählten Text in einer HTML-Überschrift ohne Fettschrift darzustellen, setzen Sie dessen CSS-Eigenschaft font-weight auf normal. Umschließen Sie nur die Wörter, die Sie ändern möchten, mit einem <span> und sprechen Sie dieses Element über eine CSS-Klasse an. Die Überschrift bleibt ein h1 oder eine andere Überschrift; ihre Struktur und semantische Bedeutung ändern sich dadurch nicht. Soll die gesamte Überschrift angepasst werden, wenden Sie die Regel stattdessen auf die Überschrift selbst an.

Fettdarstellung aus einem Teil einer Überschrift entfernen

Ein <span> gruppiert Text innerhalb einer Zeile, ohne die Bedeutung oder Überschriftenebene des übergeordneten Elements zu verändern. Setzen Sie das Element nur um die Wörter, die normal stark dargestellt werden sollen; der übrige Text behält die anderen Formatierungen der Überschrift. Für eine wiederverwendbare Anpassung weisen Sie diesem Element eine Klasse zu und definieren die Klasse in einem Stylesheet oder in einem <style>-Element im Dokumentkopf.

Ausgewählten Text mit einer CSS-Klasse formatieren

Das folgende ausführbare JavaScript-Beispiel erzeugt einen vollständigen HTML-Ausschnitt mit einer Klassenregel und einer Überschrift. Verwenden Sie die Ausgabe als Seiten-Markup und passen Sie anschließend die Überschrift und die ausgewählten Wörter an. Der Selektor .not-bold trifft nur auf <span>-Elemente mit dieser Klasse zu; andere <span>-Elemente behalten daher ihre vorhandene Formatierung.

Führen Sie dieses Beispiel aus, um den Seitenabschnitt mit der CSS-Klasse zu erzeugen. Der unveränderte Beispielcode zeigt englischen Text; dieser bleibt aufgrund der bytegenauen Vorgabe auf Englisch.

Der Code und die angezeigten Bezeichnungen oder Ausgaben in diesem Abschnitt bleiben auf Englisch.

const page = `<style>
.not-bold { font-weight: normal; }
</style>
<h1>Keep this bold; <span class="not-bold">make these words normal weight</span></h1>`;
console.log(page);

<style>
.not-bold { font-weight: normal; }
</style>
<h1>Keep this bold; <span class="not-bold">make these words normal weight</span></h1>

Verwenden Sie diese Klasse überall dort, wo dieselbe Darstellung benötigt wird. Vermeiden Sie einen allgemeinen Selektor span, wenn nur ausgewählter Text geändert werden soll: Er trifft auf jedes span-Element innerhalb seines Geltungsbereichs zu, auch auf Elemente in anderen Inhalten. Mit einer Klasse bleibt das Ziel eindeutig, und unbeabsichtigte Änderungen lassen sich vermeiden, wenn die Seite wächst.

Inline-CSS für eine einmalige Anpassung verwenden

Für eine einzelne lokale Änderung setzen Sie die Deklaration im HTML-Attribut style des span-Elements: <span style="font-weight: normal">ausgewählte Wörter</span>. Das geht schnell, wenn die Anpassung nur einmal nötig ist. Die Lösung lässt sich jedoch schlechter wiederverwenden als eine Klasse, weil die Darstellung direkt an dieses Element gebunden ist. Lassen Sie die Deklaration auf dem span-Element, damit der Rest der Überschrift seine Formatierung behält. Benötigen mehrere Elemente dieselbe Darstellung, verschieben Sie die Deklaration stattdessen in eine Klassenregel.

Fettdarstellung aus einer ganzen Überschrift entfernen

Um die gesamte Überschrift anzupassen, setzen Sie font-weight: normal direkt auf der Überschrift, zum Beispiel: <h1 style="font-weight: normal">Eine normal gewichtete Überschrift</h1>. Die Regel gilt für den gesamten Text dieser Überschrift, einschließlich aller darin enthaltenen Inline-Elemente. Soll dieselbe Darstellung für mehrere Überschriften oder Seiten gelten, verwenden Sie ein Stylesheet statt eines Inline-Attributs style. Eine Änderung der Schriftstärke verändert weder die Überschriftenebene noch die Rolle der Überschrift in der Dokumentgliederung.

Vorgehensweise wählen und Ergebnis prüfen

Verwenden Sie eine Klasse für ausgewählten Text, wenn die Regel wiederverwendbar sein soll, Inline-CSS für eine einmalige Anpassung eines span-Elements und eine Regel für die Überschrift, wenn sich die gesamte Überschrift ändern soll. Prüfen Sie nach dem Anwenden der Regel die gerenderte Seite: Kontrollieren Sie, ob die Klasse am vorgesehenen span-Element sitzt und der CSS-Selektor darauf zutrifft. Sieht der Text weiterhin fett aus, überprüfen Sie andere passende Formatierungen in den Stylesheets der Seite, darunter spezifischere oder später definierte Regeln. Sehen Sie sich außerdem font-weight in den Browser-Entwicklertools unter den berechneten Stilen an. So erkennen Sie, ob der Selektor sein Ziel verfehlt oder eine andere Regel die angezeigte Schriftstärke bestimmt.