So verwenden Sie externe Web -Schriftarten in CSS

Wenn Sie auf Ihrer Website eine Schriftart hinzufügen möchten, die standardmäßig auf dem Computer des Benutzers vorhanden ist, können Sie die CSS @Font-Face-Regel dazu verwenden. Die @font-face-Regel gibt an, dass Sie zuerst die benutzerdefinierte Schriftart einen bestimmten Namen angeben müssen und danach in die Schriftart der Schriftart. In dieser Beschreibung werden Sie ein Verständnis dafür festlegen, wie externe Webschriften in CSS verwendet werden können. Dieses Tutorial behandelt die folgenden Themen.

1. Schriftart Formate
2. So fügen Sie externe Web -Schriftarten mit CSS hinzu
3. Schriftformate und deren Browserunterstützung.

Lass uns anfangen.

Schriftart Formate

Bevor wir uns mit den Details der Hinzufügen von externen Webschriften eintauchen.

TrueType -Schriftarten
Die TrueType -Schriftarten oder TTF sind ein Standard -Schriftformat, das in den späten 80ern von Microsoft und Apple gegründet wurde. Daher ist es mit beiden Betriebssystemen kompatibel. Es ist sehr geeignet, um die Unterstützung alter Browser zu erweitern, insbesondere auf Smartphones.

OpenType -Schriftarten
Das OpenType -Schriftarten oder OTF ist ein Schriftformat, das von Microsoft auf denselben Mustern erfunden wurde wie die von TrueType -Schriftarten. Dieses Format wird in den meisten Computersystemen häufig verwendet.

Web -Open -Schriftformat
Das WOFF -Schriftformat wurde 2009 als Format entstanden, das sowohl das TTF- als auch das OTF -Formate abdeckt. Dies formatiert die Dateien und ist mit allen modernen Browsern kompatibel. Es hat zwei Versionen, der zweite wird als Woff 2 bezeichnet.0 und kompakte Dateien besser als die ältere Version.

Eingebettete Openentyp -Schriftarten
Die eingebetteten Openentyp -Schriftarten, die häufiger als EOT bezeichnet wird. Dieses Format wird als eingebettete Schriftarten auf Websites verwendet.

SVG -Schriftarten
Ein SVG -Schriftformat ermöglicht das Anzeigen von SVG in Form von Vektorgrafiken. Dies bedeutet, dass verschiedene Zeichen in verschiedenen Farben oder Animationen angezeigt werden.

Nachdem wir nun die verschiedenen Schriftformate erfahren haben, sollten Sie die folgenden Schritte berücksichtigen, um das gesamte Verfahren des Hinzufügens externer Schriftarten zu Ihrer Website zu verstehen.

So fügen Sie externe Web -Schriftarten mit CSS hinzu

Im Folgenden haben wir Ihnen eine Schritt-für-Schritt-Anleitung zur Verfügung gestellt, wie Sie externe Schriftarten mit CSS hinzufügen können.

Schritt 1: Benutzerdefinierte Schriftarten herunterladen

Der erste Schritt wäre der Herunterladen Ihrer gewünschten Schriftarten im TrueType -Schriftartenformat (.TTF) oder das OpenType -Schriftart (Format (.OFT) aus einem beliebigen Schriftart -Repository. Zum Beispiel laden wir hier "Dancing Skript" -Schriftarten von Google Fonts herunter.

Klicken Sie auf die "Familie herunterladen", um benutzerdefinierte Schriftarten herunterzuladen.

Schritt 2: Extrahieren Sie Dateien aus dem ZIP -Ordner

Extrahieren Sie nach dem Herunterladen Dateien aus dem ZIP -Ordner.

Die Schriftarten sind in der .TTF -Format. Wählen Sie nun eine dieser Schriftarten aus, die zur Schriftfamilie "Tanzskript" gehören.

Notiz: Stellen Sie sicher, dass Ihre heruntergeladenen Dateien im selben Ordner wie die Webdatei vorhanden sind.

Die Schriftdatei ist in genau demselben Ordner wie die Webdatei vorhanden.

Schritt 3: Fügen Sie Schriftarten in Ihre CSS -Datei hinzu

Verwenden Sie in Ihren externen Schriftarten in Ihrer CSS-Datei die @font-face-Regel. Die @font-face-Regel gibt an, dass Sie zuerst die benutzerdefinierte Schriftart einen bestimmten Namen angeben müssen und danach auf die Schriftart auf die Schriftart zugeben, indem Sie die URL dem SRC-Attribut geben.

Wir haben der Schriftfamilie den Namen 'CustomFonts' zugewiesen, dann haben wir das SRC-Attribut die URL der Schriftart zur Verfügung gestellt. Zuletzt verweisen wir der Schriftfamilie unserer Überschrift und geben ihr etwas Farbe.

Schritt 4: Verknüpfen Sie Ihre CSS -Datei mit der HTML -Datei

Und schließlich fügen Sie Ihr Stylesheet zu Ihrer HTML -Datei hinzu.

Wir verknüpfen unsere CSS -Datei extern mit der HTML -Datei.

Ausgang

Eine externe benutzerdefinierte Web -Schriftart wurde erfolgreich hinzugefügt.

Schriftformate und deren Browserunterstützung

Die folgende Tabelle zeigt alle Schriftformate und deren relevante Browserunterstützung.

Abschluss

Um externe Schriftarten in CSS zu verwenden, laden Sie die gewünschten Schriftarten aus einem beliebigen Schriftart-Repository herunter und fügen Sie sie mit der @font-face-Regel in die CSS-Datei hinzu Attribut. In diesem Tutorial wird die Verwendung verschiedener Schriftformate und der Art und Weise, wie externe Web -Schriftarten in CSS verwendet werden können, erklären.