Eine Schriftart ist eine Reihe von Textzeichen mit etwas Stil und Größe, die der Anwendung einen Mehrwert verleihen. CSS ermöglicht es uns, maßgeschneiderte Schriftarten entsprechend unseren Bedürfnissen zu erstellen, indem sie die “nutzen“@Schriftart" Regel. Zu diesem Zeitpunkt ist es erforderlich, die Schriftart herunterzuladen oder einen Link zu den Schriftarten vom Server anzugeben. Insbesondere benötigen Entwickler unterschiedliche Schriftarten für ihre Projekte, und ohne die @font-face-Regel wird das System auf bereits in unserem System installierte Schriftarten beschränkt.

In diesem Blog wird über die Verwendung der CSS @Font-Face-Regel sprechen.

Was ist CSS @Font-Face-Regel?

Die @font-face-Regel in CSS wird verwendet, um benutzerdefinierte Schriftarten für unsere Projekte zu erstellen. Diese Schriftarten können vom Server oder den installierten Schriftarten des Systems geladen werden.

So verwenden Sie CSS @Font-Face-Regel?

Die Syntax zur Verwendung der CSS @Font-Face-Regel wird unten erwähnt:

@Schriftart
Schriftfamilie: MyNewfont;
SRC: URL ()

Die @font-face-Regel wird definiert, indem ein Wert in der Schriftfamilie-Eigenschaft und der zugehörigen URL angegeben wird, aus der sich diese Schriftart als SRC-Attribut befindet.

Beispiel

Im folgenden Beispiel werden wir Schriftarten anpassen. Laden Sie zuerst die Schriftarten aus dem Browser herunter und fügen Sie sie zum Ordner Ihres Projekts hinzu. Sie können auch Links verwenden, wenn Sie Schriftarten vom Server verwenden.

Zuerst hinzufügen

Und

Tags und dann anpassen, um Schriftarten an jeden von ihnen anzupassen. Lassen Sie uns das oben beschriebene Szenario in drei Schritten implementieren.

Schritt 1: Hinzufügen von Elementen zur HTML -Datei

In HTML im Abschnitt hinzufügen

Und

Zum Hinzufügen einiger Inhalte im Zusammenhang mit der Webseite:

Willkommen bei LinuxHint!

Willkommen bei LinuxHint!

Schritt 2: Geben Sie die @font-face-Regel in CSS an

Um die Regel anzugeben, das Schlüsselwort “@Schriftart”Wird in CSS verwendet. Fügen Sie in seinen lockigen Klammern die Eigenschaft Schriftfamilie hinzu und fügen Sie den Schriftnamen als Wert hinzu. Verwenden Sie dann die SRC -Eigenschaft, um den URL -Pfad der heruntergeladenen Schriftart anzugeben:

@Schriftart
Schriftfamilie: MyFont;
SRC: URL ("/fonts/batuphat \ script.otf ");

In ähnlicher Weise werden wir einen weiteren benutzerdefinierten Schriftblock hinzufügen:

@Schriftart
Schriftfamilie: myfont2;
SRC: URL ("/fonts/olive_vine \ Demo.otf ");

Wenden Sie nun das Styling auf die

Und

Elemente.

Stil H2 -Element

H2
Schriftfamilie: MyFont;
Schriftgröße: 50px;

Die für die angewendeten Eigenschaften

Element werden unten erklärt:

• “Schriftfamilie"Wird mit dem Wert eingestellt"myfontWas wir in der @font-face-Regel deklariert haben.
• “SchriftgrößeDie Eigenschaft setzt die Größe der Schriftart auf 50px.

Stil H1 -Element

H1
Schriftfamilie: myfont2;
Schriftgröße: 70px;
Farbe braun;

Hier das "FarbeEigenschaft wird verwendet, um die Schriftart zu färben.

Es ist aus dem unterbereiteten Bild zu ersichtlich, dass

Und

Tags werden erfolgreich mit den neu deklarierten Schriftarten gestaltet:

Wir haben die Methode zur Verwendung der CSS @Font-Face-Regel bereitgestellt.

Abschluss

Schriftstile spielen eine wichtige Rolle bei der ästhetisch ansprechenden Anwendung. Unser System verfügt über begrenzte Schriftstile, während ein Entwickler unterschiedliche Schriftarten benötigt, um seinen Web -Apps eine Verschönerung zu verleihen. Dazu können wir mit CSS die @font-face-Regel zum Hinzufügen benutzerdefinierter Schriftarten verwenden. Dieser Artikel hat die @font-face-Regel demonstriert, mit der Sie den Schriftstil in unserer Anwendung anpassen können.