Ändern des Schriftformats eine Webseite kann eine wichtige Rolle bei der Erstellung eines einzigartigen Designs spielen und das Lesen von Inhalten erleichtern. Für angehende Webentwickler kann dies wie eine schwierige Aufgabe erscheinen. Mit ein paar einfachen Optionen in CSS können Sie jedoch die Größe, Schriftart und Farbe des Textes auf Ihrer Webseite leicht ändern.
In diesem Handbuch wir werden uns ansehen, wie Sie die Seiteneinstellungen festlegen, um das Schriftformat zu ändern. Wir zeigen Ihnen, wie Sie CSS-Eigenschaften wie font-size, font-family und color verwenden, um das Aussehen des Textes zu ändern.
Bevor wir beginnen, ist es wichtig zu beachten, dass die Anwendung eines geeigneten Schriftformats ein wichtiger Teil ist, um eine bessere Lesbarkeit des Textes auf Ihrer Webseite zu erreichen. Sie sollten eine Schriftart auswählen, die leicht zu lesen ist und dem allgemeinen Stil Ihrer Website entspricht.
Der erste Schritt zum Ändern des Schriftformats ist festlegen der Schriftgröße. Sie können die font-size-Eigenschaft verwenden, um die Schriftgröße in Pixeln, Prozentsätzen oder relativen Einheiten wie em oder rem festzulegen.
So passen Sie die Seiteneinstellungen an, um das Schriftformat zu ändern
Sie können das Schriftformat mithilfe von Cascading Style Sheets (CSS) ändern. Zunächst müssen Sie die Parameter des Textblocks definieren (dies geschieht normalerweise mit einem Tag oder
) und geben Sie diesem Block eine eindeutige ID oder Klasse an.
Sie müssen dann eine Stilregel innerhalb eines Tags oder einer externen CSS-Datei erstellen, sie auf den ausgewählten Textblock anwenden und die gewünschten Schrifteinstellungen wie Schriftart (z. B. Arial), Schriftgröße, Farbe usw. festlegen.
.my-text-block Пример текста
In diesem Beispiel werden alle Textblöcke mit der Klasse "my-text-block" in der Schriftart Arial, der Größe 16 Pixel und der Farbe #333333 angezeigt.
Sie können auch andere CSS-Eigenschaften verwenden, um das Schriftformat zu ändern, z. B. Fett (font-weight), kursiv (font-style) und unterstrichen (text-decoration).
Nachdem Sie die Seiteneinstellungen zum Ändern des Schriftformats festgelegt haben, müssen Sie die Datei mit der Erweiterung speichern.html und öffnen Sie es in einem beliebigen Webbrowser, um das Ergebnis zu sehen.
Schriftgröße
Die Schriftgröße einer Webseite kann mithilfe der CSS-Eigenschaft font-size festgelegt werden. Sie können die Schriftgröße in Pixeln, Prozentsätzen, em oder anderen Maßeinheiten festlegen.
Beispielwerte für die font-size-Eigenschaft :
- font-size: 16px; - Legt die Schriftgröße auf 16 Pixel fest;
- font-size: 14pt; - Legt die Schriftgröße in 14 Punkten fest;
- font-size: 1em; - Legt die Schriftgröße auf die Schriftgröße des übergeordneten Elements fest;
- font-size: 150%; - Legt die Schriftgröße auf 150% der Grundgröße fest;
- font-size: larger; - erhöht die Schriftgröße um eine Ebene;
- font-size: smaller; - reduziert die Schriftgröße um eine Ebene;
Sie können auch relative Maßeinheiten wie em, rem oder vw verwenden. Sie ermöglichen es Ihnen, ansprechende und ansprechende Seiten zu erstellen.
Beachten Sie, dass Sie aus Gründen der Benutzerfreundlichkeit lesbare Schriftgrößen auswählen und die Verwendung von zu kleinen oder zu großen Werten vermeiden sollten.
Schriftfarbe
Die Syntax für die Verwendung der color-Eigenschaft lautet wie folgt:
color: Bedeutung;
Der Wert kann in mehreren Formaten dargestellt werden:
- namensformat (z. B. red) - Geben Sie den Namen der Farbe in englischer Sprache an;
- hexadezimalformat (z. B. #ff0000) - Gibt die hexadezimale Darstellung der Farbe an;
- rgb-Format (z. B. rgb (255, 0, 0)) - Legt den Wert für Rot, Grün und Blau (0 bis 255) fest.
Beispiel für die Verwendung der color-Eigenschaft:
p
In diesem Beispiel haben alle Absätze auf der Seite eine rote Schriftfarbe.
Wenn Sie eine Schriftfarbe auswählen, sollten Sie die Sichtbarkeit auf dem Hintergrund der Seite berücksichtigen, damit der Text leicht lesbar ist.
Schriftart
Mit Webseiten können Sie verschiedene Schrifttypen für Text festlegen, um ihnen ein besonderes Aussehen zu verleihen und den Stil des Inhalts zu betonen.
Verwenden Sie ein Element, um den Schrifttyp im HTML-Dokument festzulegen. Das Face-Attribut gibt den Namen der ausgewählten Schriftart an.
Hier ist ein Beispiel für die Verwendung:
- - installiert eine Arial-Schriftart oder eine serifenfreie Schriftart (sans-serif).
- - setzt die Schriftart Times New Roman oder Serif-Schriftart (Serif).
- - legt die Schriftart Courier New oder die Schriftart Monospace fest.
Beachten Sie, dass die ausgewählte Schriftart auf dem Computer des Benutzers installiert sein muss, damit sie korrekt angezeigt werden kann.
Wenn die Schriftart fehlt, ersetzt der Browser sie durch die nächste alternative Schriftart.
Zeilenabstand
Der Zeilenabstand bestimmt den Abstand zwischen den Textzeilen innerhalb des Elements. Sie kann mithilfe der CSS-Eigenschaft geändert werden line-height. Eigenschaftswert line-height kann in Pixeln, Prozentsätzen oder anderen Maßeinheiten angegeben werden.
Wenn Sie einen ausreichenden Zeilenabstand einstellen, wird der Text lesbarer und lesbarer. Ein zu kleiner Zeilenabstand kann zu Schwierigkeiten beim Lesen des Textes führen, und ein zu großer Abstand kann zu einem unangenehmen visuellen Überlauf führen.
Beispiel für die Verwendung einer Eigenschaft line-height:
In diesem Beispiel ist der Wert der Eigenschaft line-height gleich 1,5. Dies bedeutet, dass der Zeilenabstand innerhalb der Elemente es wird 1,5 mal größer sein als die Schriftgröße.
Um den Zeilenabstand in Prozent oder in anderen Maßeinheiten festzulegen, müssen Sie den Eigenschaftswert ersetzen line-height auf das Notwendige.
Wenn Sie einen geeigneten Zeilenabstand festlegen, können Sie eine optimale Lesbarkeit des Textes erzielen und die Benutzererfahrung verbessern.
Fettdruck
Um die Schriftart in Fett zu ändern, können Sie das Tag verwenden strong oder b. Diese Tags geben den Text an, der fett formatiert werden soll.
Dieser Text wird mit einem Tag in Fettschrift hervorgehoben strong.
Und dieser Text wird mit dem Tag b fettgedruckt hervorgehoben.
Beide Tags strong und b sie führen die gleiche Funktion aus und liefern das gleiche Ergebnis.
Kursive
In HTML können Sie Kursivschrift verwenden, um Text hervorzuheben.
Sie können dazu ein Tag verwenden , die kursiv steht.
Dieser Text kursiv dargestellt.
Als Ergebnis erhalten wir:
Dieser Text kursiv dargestellt.
