HTML: Schriftgröße, Schriftfarbe, Schriftart ändern

Texte in HTML kann man einfach bearbeiten. Dazu zählt auch die Schriftgröße. In dem Folgenden Beitrag zeige ich dir wie du in HTML die Schriftgröße ändern kannst.

Ohne Veränderung sieht dein HTML Code so aus

<div>Dieser Text hat keine Schriftgröße</div>

Schrift Größe ändern

Schriftgrößen werden immer mit CSS verändert. Der Befehl in CSS heißt font-size: 15px . Der Text wird nun in Schriftgröße 15 angezeigt.

<div style="font-size: 15px;">Dies ist ein Text in Schriftgröße 15</div>

Die Schriftgröße wird in der Regel in Pixel angegeben, das bedeutet die Anzahl der Punkte auf dem Bildschirm. Der Buchstabe nimmt die Anzahl in Pixeln in der Höhe ein

Schriftfarbe ändern

Wenn du jetzt zudem auch noch die Schriftfarbe ändern möchtest. Dann kannst du das mit dem Befehl color #2dcc77 machen. Die Zahl #2dcc77 steht dafür für den Hex Farbcode Den Farbcode kannst du dir für jede Farbe generieren lassen.

<div style="color: #2dcc77;">Dieser Text hat eine Farbe</div>

Schriftart ändern

Die Schriftart wird verändert in dem man in CSS-Attribut die Schrift Familie: font-family hinterlegt. Als Befehl wird der Name einer Schriftart angegeben.

Dabei solltest du beachten, dass Schriftarten, die nicht auf dem Computer installiert sind auch nicht als solche angezeigt werden können. Wenn du zum Beispiel die Schriftart ‚Arial Black‘ definierst und jemand der kein ‚Arial Black‘ installiert hat, sich diese Seite ansieht, dann erscheint die Schrift bei ihm automatisch in einer anderen Schriftart. Abhilfe dabei schaffen später sogenannte Webfonts.

Durch die Angabe von mehreren Schriftarten wird die erste Schrift genommen, die verfügbar ist. Sollte also im folgenden Beispiel die Schrift „Verdana“ nicht vorhanden sein, wird auf „Arial“ zurückgegriffen:

<div>style="font-family: Arial, Verdana"&gt;Dieser Text hat eine andere Schriftart</div>

Jetzt HTML lernen

Weitere Beiträge zu HTML

HTML: Text in Zwischenablage kopieren – So gehts
HTML: Grundgerüst – Webseite erstellen
HTML: Textarea erstellen – So gehts
PHP in HTML einfügen – So gehts!
HTML: Rahmen um Text – So gehts

HTML Datei öffnen – Kostenloser Editor 2021
HTML: Anker erstellen – So wirds gemacht!
HTML: 302 Redirect – So einfach gehts!
HTML: URL Parameter Erklärung
HTML: Bild einfügen – So gehts!

Jquery in HTML einbinden : So wirds gemacht!
HTML: Zurück Button & Link erstellen: So gehts!
HTML: Versteckter und Unsichtbarer Text : So gehs
HTML: Großbuchstaben schreiben: So gehts!
HTML: Icons einfügen: So gehts!

HTML: iFrame in Webseite einbinden – So gehts!
HTML: Liste erstellen – So gehts!
HTML: Erzwungenes Leerzeichen einfügen – So gehts!
CSS in HTML einbinden – So gehts!
HTML: Leerzeichen erstellen – So einfach gehts!

HTML: Auskommentieren – So gehts!
HTML: Bild zentrieren und mittig ausrichten
HTML: Fett schreiben – So einfach gehts!
HTML Text ausrichten: rechtsbündig & linksbündig
HTML: Zeilenabstand einstellen – So gehts!

HTML: Trennlinie einfügen – So gehts!
HTML: Absatz einfügen – So gehts!
HTML: Horizontale Linie – So gehts
HTML: Tabellen erstellen – So gehts!
HTML: Datum & Uhrzeit anzeigen – So gehts!

Domi

Hi ich bin’s Dominik. Auf Blogseite.com findest du alles was mich interessiert. Mag Games, liebe SEO, programmiere gerne und möchte dir mit verschiedenen Themen die mich begeistern einen Mehrwert liefern. Viel Spaß auf meiner Seite

Das könnte dich interessieren!

Weitere Kategorien