In diesem Blog wird über die Verwendung der CSS @font-face-Regel gesprochen.
Was ist die 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.
Wie verwende ich die CSS-@font-face-Regel?
Die Syntax zur Verwendung der CSS-@font-face-Regel ist unten aufgeführt:
@Schriftart {
Schriftfamilie : MeineNeueSchrift ;
Quelle : URL ( )
}
Die @font-face-Regel wird definiert, indem ein Wert in der Eigenschaft font-family und die zugehörige URL, von der sich diese Schriftart befindet, als src-Attribut angegeben werden.
Beispiel
Im folgenden Beispiel werden wir Schriftarten anpassen. Laden Sie dazu zunächst die Schriftarten aus dem Browser herunter und fügen Sie sie dem Ordner Ihres Projekts hinzu. Sie können auch Links verwenden, wenn Sie Schriftarten vom Server verwenden.
Fügen Sie zuerst die Tags
und hinzu und wenden Sie sie dann an, um Schriftarten für jeden von ihnen anzupassen. Lassen Sie uns das oben beschriebene Szenario in drei Schritten implementieren.
Schritt 1: Elemente zur HTML-Datei hinzufügen
Schritt 1: Elemente zur HTML-Datei hinzufügen
Fügen Sie in HTML im Abschnitt
und hinzu, um einige Inhalte hinzuzufügen, die sich auf die Webseite beziehen:
< h2 > Willkommen bei Linuxhint! < / h2 >
< h1 > Willkommen bei Linuxhint! < / h1 >
Schritt 2: Geben Sie die @font-face-Regel in CSS an
< h2 > Willkommen bei Linuxhint! < / h2 >
< h1 > Willkommen bei Linuxhint! < / h1 >
Schritt 2: Geben Sie die @font-face-Regel in CSS an
Um die Regel zu spezifizieren, muss das Schlüsselwort „ @Schriftart “ wird in CSS verwendet. Fügen Sie innerhalb der geschweiften Klammern die Eigenschaft font-family und den Namen der Schriftart als Wert hinzu. Verwenden Sie dann die Eigenschaft src, um den URL-Pfad der heruntergeladenen Schriftart anzugeben:
@Schriftart {
Schriftfamilie : meineschrift ;
Quelle : URL ( '/fonts/Batuphat\Script.otf' ) ;
}
In ähnlicher Weise werden wir einen weiteren benutzerdefinierten Schriftblock hinzufügen:
@Schriftart {Schriftfamilie : meineschrift2 ;
Quelle : URL ( '/fonts/Olive_Vine\ DEMO.otf' ) ;
}
Wenden Sie jetzt Stil auf die Elemente
und an.
Stil h2-Element
h2 {
Schriftfamilie : meineschrift ;
Schriftgröße : 50px ;
}
Stil h2-Element
h2 {Schriftfamilie : meineschrift ;
Schriftgröße : 50px ;
}
Die auf das Element
angewendeten Eigenschaften werden im Folgenden erläutert:
- „ Schriftfamilie “ wird mit dem Wert „ meineschrift “, was wir in der @font-face-Regel deklariert haben.
- „ Schriftgröße ”-Eigenschaft setzt die Schriftgröße auf 50 Pixel.
Stil h1-Element
h1 {
Schriftfamilie : meineschrift2 ;
Schriftgröße : 70px ;
Farbe : braun ;
}
Hier die ' Farbe ”-Eigenschaft wird verwendet, um die Schriftart einzufärben.
Aus dem unten bereitgestellten Bild ist ersichtlich, dass
- und -Tags erfolgreich mit den neu deklarierten Schriftarten formatiert wurden:
Wir haben die Methode zur Verwendung der CSS @font-face-Regel bereitgestellt.
Fazit
Schriftstile spielen eine wichtige Rolle, um jede Anwendung ästhetisch ansprechend zu gestalten. Unser System verfügt über begrenzte Schriftstile, während ein Entwickler verschiedene Schriftarten benötigt, um seine Web-Apps zu verschönern. Zu diesem Zweck ermöglicht CSS die Verwendung der @font-face-Regel zum Hinzufügen benutzerdefinierter Schriftarten. Dieser Artikel hat die @font-face-Regel demonstriert, mit der Sie den Schriftstil in unserer Anwendung anpassen können.