Die Installation einer geeigneten Schriftart kann das Aussehen und die Lesbarkeit Ihrer Website erheblich verbessern. Glücklicherweise gibt es in HTML mehrere Möglichkeiten, Schriftarten in Code zu setzen.
Der erste Weg ist die Verwendung des globalen CSS-Stils. Sie können einen Stil für das gesamte Element oder nur für bestimmte Codesegmente definieren. Um dies zu tun, müssen Sie die Grundlagen von CSS erlernen und die Eigenschaft "font-family" verwenden, um die Schriftart festzulegen.
Wenn Sie die Schriftart nur für ein bestimmtes Element festlegen müssen, können Sie den integrierten Stil verwenden. In diesem Fall können Sie dem öffnenden Tag des Elements das Attribut "style" hinzufügen und den gewünschten Wert für die Eigenschaft "font-family" festlegen.
Wenn Sie eine benutzerdefinierte Schriftart verwenden möchten, die nicht auf den Computern der Benutzer installiert ist, können Sie sie von einer externen Quelle wie Google Fonts herunterladen. Zuerst müssen Sie einen Verweis auf die Schriftart erhalten und ihn dem "head" -Abschnitt Ihres HTML-Codes hinzufügen. Sie können diese Schriftart dann in Ihrem CSS oder Inline-Stil verwenden.
Das Festlegen einer Schriftart in HTML-Code kann eine ziemlich einfache Aufgabe sein, wenn Sie die Grundlagen von CSS kennen. Überprüfen Sie Ihre Stile, stellen Sie sicher, dass sie Ihren Erwartungen entsprechen, und genießen Sie das neue, frische Aussehen Ihrer Website!
Beginnend mit dem Footer: Schritt eins - Verbinden der CSS-Datei
Um eine Schriftart im HTML-Code zu installieren, müssen Sie zuerst eine CSS-Datei anhängen. Die CSS-Datei enthält die Stile, die auf die HTML-Elemente angewendet werden. Auf diese Weise können wir die Schriftart und ihre Eigenschaften für die Elemente ändern, die wir benötigen.
Zuerst erstellen wir eine Datei mit der Erweiterung .css zum Beispiel "style.css". In dieser Datei werden wir alle Stile beschreiben, die wir benötigen. Dann verbinden wir diese Datei mit unserem HTML-Dokument.
Verwenden Sie ein Tag, um eine CSS-Datei zu verknüpfen. Das href-Attribut gibt den Pfad zur Datei mit Stilen an, und das rel-Attribut gibt die Beziehung zwischen dem aktuellen Dokument und der zu verbindenden Datei an. Der Wert "stylesheet" bedeutet, dass es sich bei der zu verbindenden Datei um eine Datei mit Stilen handelt.
Nachdem wir eine CSS-Datei angehängt haben, haben wir die Möglichkeit, Stile aus dieser Datei in unserem HTML-Dokument zu verwenden.
Zweiter Schritt: Laden Sie die gewünschte Schriftart von der richtigen Ressource herunter
Um die gewünschte Schriftart im HTML-Code zu installieren, müssen Sie sie von einer geeigneten Ressource herunterladen. Dies kann eine Website sein, die kostenlose oder kostenpflichtige Schriftarten bereitstellt, oder eine andere Quelle, in der Sie die gewünschte Schriftdatei herunterladen können.
Es gibt viele Webressourcen, auf denen Sie Schriftarten finden können, die auf Webseiten verwendet werden können. Einige bieten Schriftarten kostenlos an, andere erfordern den Kauf einer Lizenz. Vergewissern Sie sich vor dem Herunterladen der Schriftart, dass Sie die Nutzungsbedingungen und die Lizenz für die Schriftart gelesen haben.
Wenn Sie eine geeignete Ressource gefunden und eine Schriftartdatei heruntergeladen haben, ist der nächste Schritt, sie Ihrem HTML-Code hinzuzufügen. Normalerweise wird die geladene Schriftart in einem Format dargestellt .ttf (TrueType) oder .otf (OpenType).
Sie müssen die Tags oder verwenden, um die Schriftart zu laden. Im ersten Fall können Sie ein Tag mit einem rel-Attribut gleich "stylesheet" und einem href-Attribut verwenden, das den Pfad zur geladenen Schriftdatei angibt.
Zum Beispiel, wenn Sie eine Schriftdatei mit dem Namen "font.ttf" und wenn Sie es im selben Ordner wie Ihr HTML-Code abgelegt haben, fügt der folgende Code eine Schriftart hinzu:
Wenn Sie es vorziehen , ein Tag zu verwenden, müssen Sie dem Block innerhalb des Tags den folgenden Code hinzufügen :
@font-face
Anstelle von "Schreibtitelname" können Sie einen beliebigen Namen angeben, der bei der Auswahl einer Schriftart für Elemente im HTML-Code verwendet wird.
Nachdem Sie die Schriftart geladen haben, können Sie sie mit der CSS-Eigenschaft font-family für Elemente in Ihrem HTML-Code verwenden.
Sie haben jetzt das nötige Wissen, um eine Schriftart von einer geeigneten Ressource herunterzuladen und sie in Ihrem HTML-Code zu verwenden. Dieser Schritt hilft Ihnen, ein einzigartiges und attraktives Design für Ihre Webseite zu erstellen.
Schritt drei: Hinzufügen einer Schriftart zum Projektordner
Nachdem Sie die richtige Schriftart für Ihr Projekt ausgewählt und heruntergeladen haben, müssen Sie sie dem Projektordner hinzufügen, damit sie im HTML-Code verwendet werden kann.
1. Erstellen Sie einen neuen Ordner in Ihrem Projektverzeichnis. Nennen Sie es "fonts" oder einen anderen praktischen Namen.
2. Wählen Sie die heruntergeladene Schriftart aus und kopieren Sie sie in den gerade erstellten Ordner "fonts". Stellen Sie sicher, dass der Name der Schriftdatei keine Leerzeichen oder Sonderzeichen enthält.
3. Um die Organisation der Dateien zu erleichtern, können Sie für jede Schriftart separate Unterordner im Ordner "fonts" erstellen, insbesondere wenn Sie mehrere Schriftarten verwenden möchten. Sie können beispielsweise einen Unterordner "Roboto" erstellen und die Roboto-Schriftdateien dort ablegen.
4. Stellen Sie sicher, dass der Ordner "fonts" und alle darin enthaltenen Schriftartdateien über die richtigen Zugriffsberechtigungen für Ihren Webserver verfügen, damit sie zum Herunterladen verfügbar sind.
Nachdem Sie diese Schritte ausgeführt haben, haben Sie die Schriftart erfolgreich zum Projektordner hinzugefügt und können mit dem nächsten Schritt fortfahren, der im nächsten Teil dieser schrittweisen Anleitung beschrieben wird.
Vierter Schritt: Erstellen eines Ordners für die Schriftart innerhalb des Projekts
Um eine Schriftart innerhalb des HTML-Codes zu installieren, müssen Sie einen speziellen Ordner innerhalb des Projekts erstellen, in den Sie die Dateien mit den Schriftarten einfügen.
Erstellen Sie einen neuen Ordner in Ihrem Projektverzeichnis und geben Sie ihm einen geeigneten Namen, z. B. "fonts".
Öffnen Sie den erstellten Ordner und kopieren Sie alle Dateien mit Schriftarten, die Sie in Ihrem HTML-Code verwenden möchten.
Stellen Sie sicher, dass sich jede Schriftdatei in einem separaten Unterordner im Ordner "fonts" befindet. Dies hilft Ihnen, Ihre Schriftsammlung zu organisieren und mögliche Konflikte mit anderen Dateien im Projekt zu vermeiden.
Nachdem alle Schriftdateien in den Ordner "Fonts" kopiert wurden, ist Ihre Schriftsammlung für die Verwendung im HTML-Code bereit.
Fünfter Schritt: Angeben des Pfads für die Schriftart im HTML-Code
Nachdem Sie die Schriftdateien auf Ihren Webserver hochgeladen haben, können Sie den Pfad zur Schriftdatei im HTML-Code angeben. Dadurch kann der Browser die von Ihnen gewählte Schriftart auf der Webseite herunterladen und verwenden.
Um den Pfad zu einer Schriftart im HTML-Code anzugeben, müssen Sie eine spezielle CSS-Stilregel verwenden, die als @font-face bekannt ist. Diese Regel ermöglicht es dem Browser, eine Schriftart zu laden und innerhalb des HTML-Codes zu verwenden.
Der folgende Code zeigt, wie Sie mithilfe der @font-face-Regel den Pfad einer Schriftdatei angeben:
@font-face
Sie müssen "Schreibtitelname" durch den Namen Ihrer Schriftart ersetzen (den Sie im ersten Schritt angegeben haben), "Schreibtitelpfad".die Erweiterung" auf den Pfad der Schriftdatei auf Ihrem Webserver und "Schriftartformat" auf das Schriftformat (z. B. "woff" oder "ttf").
Zum Beispiel, wenn Sie Ihre Schriftart "Roboto" genannt haben und eine Datei mit der Erweiterung heruntergeladen haben .woff auf den Weg "fonts/roboto.woff", dann würde Ihre @font-Face-Regel wie folgt aussehen:
@font-face Beachten Sie, dass Sie auch mehrere Schriftquellen mit unterschiedlichen Formaten angeben können, um die Kompatibilität mit verschiedenen Browsern zu maximieren:
@font-face Nachdem Sie den Pfad zu einer Schriftart angegeben haben, können Sie sie in Ihren CSS-Stilen verwenden, indem Sie einfach den Namen der Schriftart in der font-family-Eigenschaft angeben:
In diesem Beispiel ist der Text innerhalb eines Elements
wird in der Schriftart angezeigt, die im "Schreibtitelname" angegeben ist, falls verfügbar, andernfalls wird eine serifenlose Schriftart (sans-serif) verwendet.
Jetzt wissen Sie, wie Sie den Pfad zu einer Schriftart innerhalb des HTML-Codes angeben, um die von Ihnen geladene Schriftart auf Ihrer Webseite zu verwenden.
Schritt sechs: anwenden einer Schriftart auf ein bestimmtes Element
Nachdem Sie die ausgewählte Schriftart im HTML-Code installiert haben, können Sie sie mithilfe von CSS auf ein bestimmtes Element anwenden.
Definieren Sie zunächst die Klasse oder ID des Elements, auf das die Schriftart angewendet werden soll. Dies kann mit dem Attribut class oder id erfolgen.
Wenn Sie beispielsweise eine Schriftart auf einen Absatz anwenden möchten, können Sie die Klasse oder den Bezeichner wie folgt festlegen:
- Mit einer Klasse:
Absatztext
- Mit einer ID:
Absatztext
Fügen Sie dann den folgenden CSS-Code in das Tag oder eine externe CSS-Datei ein:
- Für eine Klasse: .my-font font-family: "Schriftname"; '>
- Für die ID: #my-font font-family: "Schriftname"; '>
Ersetzen Sie "Schriftname" durch den Schriftnamen, den Sie zuvor installiert haben.
Die ausgewählte Schriftart wird nun auf das Element mit der angegebenen Klasse oder ID angewendet.
Schritt sieben: Überprüfen der korrekten Schriftverbindung
Nachdem Sie alle vorherigen Schritte abgeschlossen haben, müssen Sie sicherstellen, dass die Schriftart ordnungsgemäß mit dem HTML-Code verbunden ist. Führen Sie dazu die folgenden Schritte aus:
- Öffnet die Webseite, auf der die neue Schriftart angewendet wurde, in einem beliebigen Webbrowser.
- Blättern Sie die Seite nach unten zu der Stelle, an der die ausgewählte Schriftart angewendet wird.
- Schauen Sie sich den Text an, der in der neuen Schriftart angezeigt werden soll.
- Stellen Sie sicher, dass die Schriftart korrekt angezeigt wird und den Erwartungen entspricht. Achten Sie auf Schriftgröße, Schriftart und Textdesign.
Wenn die Schriftart bei der Überprüfung nicht korrekt angezeigt wird, sollten Sie überprüfen, ob der Pfad zur Schriftdatei korrekt ist und ob Fehler in der Codesyntax und -formatierung auftreten können. Falls erforderlich, nehmen Sie die erforderlichen Korrekturen vor und wiederholen Sie die Schritte erneut. Es ist auch möglich, eine Überprüfung in verschiedenen Browsern durchzuführen, um überzeugend zu sein.
