Ändern der auf einer Webseite angezeigten Schriftart und Farbe

Hinweis: Diese Seite bezieht sich auf das Ändern von Schriftart, -größe und -farbe auf einer Webseite. Informationen zu Microsoft Word finden Sie auf unserer Seite zum Ändern der Schriftfarbe, -größe oder -art in Word.

Dieses Dokument enthält Anweisungen zum Ändern einer Schriftart und ihrer Farbe auf einer Webseite. Die richtige Syntax für die Zukunft ist die Verwendung von Cascading Style Sheets zusammen mit den Klassen- oder ID-Selektoren anstelle eines Inline-Style-Attributs oder eines Font-Tags, die nicht mehr empfohlen werden. Allerdings ist es erwähnenswert, dass diese beiden Methoden auch bei den meisten Internetbrowsern funktionieren.

Um fortzufahren, wählen Sie die Methode aus, die Sie erlernen möchten, oder lesen Sie jeden Abschnitt.

Wenn Sie die Schriftart und deren Farbe nur einmal auf einer Webseite ändern möchten, müssen Sie deren Attribute im Element-Tag ändern. Mit dem style- Attribut können Sie die Schriftart und -farbe der Schrift mit der Schriftfamilie, der Farbe und der Schriftgröße mit der Schriftgröße angeben, wie im folgenden Beispiel gezeigt.

Beispielcode

Dieser Text hat die Schrift Courier, ist Blau und 20px.

Ergebnis

Dieser Text hat die Courier-Schrift, ist blau und hat eine Größe von 20px.

CSS für eine oder mehrere Seiten verwenden

Benutzerdefinierte Schriftart für eine Seite

Im Kopfbereich Ihrer Webseite können Sie Code zwischen den Registerkarten einfügen, um das Erscheinungsbild Ihres Texts in verschiedenen Elementen zu ändern. Das nächste blaue Feld enthält Beispielcode, der nach dem Aufruf die Schriftart in Courier ändert und rot färbt. Wie Sie sehen, haben wir den Klassennamen als "benutzerdefiniert" definiert.

 .custom {font-family: Courier; Farbe Rot; Schriftgröße: 20px; } 

Nach dem Definieren kann dieses Styling auf die meisten Elemente auf Ihrer Seite angewendet werden, indem Sie die Klasse "custom" anfügen. Das folgende Feld zeigt zwei Codezeilen und ihre jeweiligen Ergebnisse.

Beispiel

Dieser ganze Satz ist rot und kuriert

Nur das Wort TEST ist rot und Courier.

Ergebnis

Dieser ganze Satz ist rot und kuriert.

Nur das Wort TEST ist rot und Courier.

Benutzerdefinierte Schriftart für viele Seiten

Das Importieren einer externen CSS-Datei kann sehr vorteilhaft sein, da Benutzer die Regeln für mehrere Seiten gleichzeitig ändern können. Der folgende Abschnitt zeigt ein Beispiel zum Erstellen einer grundlegenden CSS-Datei, die die Schriftart und die Farbe der meisten Elemente ändert. Diese Datei kann in mehr als eine Webseite geladen werden, sogar auf eine gesamte Website.

Wenn Sie den folgenden Text mit einem einfachen Texteditor als .css-Datei speichern, wird er für den Import vorbereitet.

 @charset "utf-8";

.courier {font-family: Courier; Farbe: # 005CB9; }

Sobald der vorstehende Text in eine .css-Datei eingefügt wurde (wir haben unsere basic.css benannt ), können Sie von jeder anderen Seite aus eine Verknüpfung herstellen, indem Sie eine Zeile verwenden, die dem folgenden Beispiel ähnelt.

Tipp: Benutzer können die Attribute von Elementen auf einer Seite ändern, indem Sie den Code in der importierten .css-Datei ändern.

Font-Tag-Lösung

Obwohl es veraltet ist, kann das HTML-Tag immer noch verwendet werden und kann bei einigen Onlinediensten erforderlich sein. Wenn Sie das FONT-Tag verwenden, müssen Sie das Gesichtsattribut angeben, das die zu verwendende Schriftart beschreibt. In dem folgenden Beispiel verwenden wir die Courier-Schriftart und den hexadezimalen Farbcode # 005CB9, der dunkelblau ist.

Beispielcode

 Ein spezielles Schriftbeispiel. 

Ergebnis