Webentwickler müssen häufig die Schriftart im HTML-Code ändern, um ihrer Webseite ein stilvolleres und attraktiveres Aussehen zu verleihen. Die korrekte Verwendung von Schriftarten ermöglicht die Lesbarkeit und Hervorhebung wichtiger Inhaltselemente.
HTML bietet verschiedene Möglichkeiten, die Schriftart auf einer Webseite zu ändern. Eine der einfachsten Methoden ist die Verwendung eines Tags font geben Sie die gewünschte Schriftart, -größe und -farbe an. Zum Beispiel:
Beispiel für eine Schrift von Arial in der Größe 4 und blau
Es wird jedoch empfohlen, alternative Methoden wie CSS (Cascading Style Sheets) zu verwenden, um die Schriftart auf einer Webseite zu ändern. CSS bietet eine flexiblere und leistungsfähigere Möglichkeit, das Erscheinungsbild einer Website zu steuern.
Das Anwenden von CSS zum Ändern der Schriftart ermöglicht es Entwicklern, Stile für verschiedene Selektoren wie Tags, Klassen und IDs zu definieren. Außerdem bietet CSS die Möglichkeit, externe Dateien mit Stilen zu verwenden, wodurch es einfacher ist, sie zu unterstützen und zu ändern.
Ändern der Schriftart des HTML-Codes
Mit einem Tag können Sie einen bestimmten Text im Code hervorheben. Dieses Tag bedeutet, dass der Text besonders wichtig oder wesentlich ist. Zum Beispiel:
Этот текст будет выделен с помощью тега strong.
Mit einem Tag können Sie den Text kursiv markieren. Das em-Tag impliziert, dass der Text emphatisch ist oder seine Bedeutung hervorhebt. Zum Beispiel:
Этот текст будет выделен с помощью тега em.
Sie können CSS verwenden, um eine genauere Kontrolle über die Schriftart in HTML zu erzielen. Sie können beispielsweise eine Schriftart und ihre Eigenschaften innerhalb eines Tags definieren :
pВесь текст внутри этого тега p будет отображаться шрифтом Arial, 14px.
Sie können auch ein Attribut verwenden style anwenden von Stilen auf einzelne Elemente. Zum Beispiel:
Этот текст будет отображаться шрифтом Arial, 14px.
Wenn Sie CSS-Klassen verwenden, können Sie Stile auf eine Gruppe von Elementen anwenden. Zum Beispiel:
.custom-fontВесь текст внутри этого тега p будет отображаться шрифтом Arial, 14px.
Alle oben genannten Methoden können kombiniert werden, um den gewünschten Effekt und die Kontrolle über die Schriftart im HTML-Code zu erzielen.
Verwenden von CSS-Stilen:
Mit CSS (Cascading Style Sheets) können Sie Stile für Elemente einer Webseite festlegen. Mit CSS können Sie Schriftarten und ihre Eigenschaften wie Farbe, Größe und Dicke ändern.
Um CSS-Stile auf HTML-Elemente anzuwenden, müssen Sie einen CSS-Codeblock innerhalb des Tags erstellen. Zum Beispiel:
In diesem Beispiel wird der Stil auf das Tag angewendet , die zum Erstellen von Absätzen verwendet wird. Verwenden von Eigenschaften font-family, font-size und color Die Schriftart, die Schriftgröße und die Farbe des Textes innerhalb der Absätze werden entsprechend festgelegt. Auf diese Weise haben alle Absätze auf der Seite den angegebenen Stil.
Sie können auch Stile direkt innerhalb von HTML-Tags angeben, indem Sie das Attribut verwenden style. Zum Beispiel:
Текст абзаца
In diesem Fall wird der Stil nur auf einen bestimmten Absatz angewendet, nicht auf alle Absätze auf der Seite.
Mithilfe von CSS können Sie Schriftarten und ihre Eigenschaften auf einer Webseite flexibel verwalten und so eine ansprechende und lesbare visuelle Darstellung des Inhalts erstellen.
Eingebettete Schriftarten:
HTML enthält mehrere eingebettete Schriftarten, mit denen Sie das Erscheinungsbild von Text auf einer Webseite ändern können. Einige der gebräuchlichsten eingebetteten Schriftarten sind Arial, Verdana und Times New Roman.
Um die eingebettete Schriftart im HTML-Code zu verwenden, können Sie das Element verwenden . Zum Beispiel:
| HTML-Code | Ergebnis |
|---|---|
| Dieser Text ist in der Schriftart Arial | Dieser Text ist in der Schriftart Arial |
| Dieser Text ist in der Verdana-Schriftart | Dieser Text ist in der Verdana-Schriftart |
| Dieser Text ist in der Schriftart Times New Roman | Dieser Text ist in der Schriftart Times New Roman |
Beachten Sie, dass das Vorhandensein von Webschriftarten für den Benutzer die Art und Weise beeinflussen kann, wie die Schriftart auf dem Bildschirm angezeigt wird. Wenn der Benutzer die im Element angegebene Schriftart nicht installiert hat, verwendet der Browser die Standardschriftart.
Um Probleme mit der Anzeige von Schriftarten zu vermeiden, wird empfohlen, externe Schriftarten oder eingebettete Schriftarten zu verwenden, die von Webbrowsern häufig unterstützt und von Benutzern installiert werden. Sie können auch CSS verwenden, um Schriftarten auf einer Webseite zu ändern.
Verbinden von Schriftarten mit Google Fonts:
Google Fonts bietet kostenlose Schriftarten, die Sie problemlos in Ihrem HTML-Code verwenden können. Befolgen Sie die folgenden Schritte, um Schriftarten mit Google Fonts zu verbinden:
1. Öffnen Sie einen Webbrowser und rufen Sie die Google Fonts-Website auf (https://fonts.google.com ).
2. Verwenden Sie die Suche oder durchsuchen Sie die verschiedenen Schriftarten, die auf Google Fonts verfügbar sind. Wählen Sie die gewünschte Schriftart aus, klicken Sie auf die Schaltfläche «Alles auswählen» und dann auf die Schaltfläche «Einbetten».
3. Kopieren Sie den generierten Stilcode und fügen Sie ihn in den Abschnitt ein
vor dem schließenden Tag Ihres HTML-Dokuments .
4. Um die ausgewählte Schriftart in Ihrem HTML-Code zu verwenden, fügen Sie dem gewünschten Element den folgenden Stil hinzu:
font-family: 'Schreibtitelname', sans-serif;
Ersetzen Sie 'Schreibtitelname' durch den aktuellen Schriftnamen, den Sie auf der Google Fonts-Website ausgewählt haben. Wenn Sie beispielsweise die Schriftart "Roboto" ausgewählt haben, verwenden Sie:
font-family: 'Roboto', sans-serif;
5. Speichern und laden Sie Ihre HTML-Datei in einem Webbrowser hoch, um die ausgewählte Schriftart in Aktion zu sehen.
Jetzt wissen Sie, wie Sie Schriftarten mit Google Fonts in Ihrem HTML-Code verbinden und verwenden können. Fühlen Sie sich frei, mit verschiedenen Schriftarten zu experimentieren, um ein einzigartiges Design für Ihre Website oder Anwendung zu erstellen.
