So importieren Sie Google Web -Schriftart in CSS?
In der Webentwicklung bietet die korrekte Verwendung von Schriftarten ein attraktives Aussehen für die Anwendung. Diese Schriftstile geben visuelle Hinweise auf die Leserreihenfolge des Dokuments. Zum Beispiel muss der Schriftstil des Dokumentübergangs von anderen mutig und bedeutend sein. Das Styling hilft auch, wichtige Inhalte von anderen zu unterscheiden.
Die Lernergebnisse dieses Artikels sind:
- Was sind Google Web -Schriftarten?
- So importieren Sie Google -Schriftarten in HTML?
- So verwenden Sie Google -Schriftarten in der CSS -Datei?
Was sind Google Web -Schriftarten?
Google Web Font ist eine Open-Source-Bibliothek, die Hunderte von Schriftarten oder Familien enthält. Es bietet auch APIs, mit denen wir Web -Schriftarten mit Android und CSS verwenden können. Google -Schriftarten sind viel leichter als andere Schriftbibliotheken und sind kostenlos für die Geschäftsnutzung verfügbar. Diese sind einfacher auf einer Website zu implementieren.
Standardmäßig bietet CSS Fantasy-, Serifen-, Sans -Serifen-, Kursiv- und Monospace -Schriftstile. Google -Schriftarten können verwendet werden, wenn Sie einige andere Schriftstile verwenden möchten.
So importieren Sie Google -Schriftarten in HTML?
Gehen Sie die folgenden Schritte durch, um Google -Schriftarten auf einer HTML -Seite zu verwenden.
Schritt 1: Wählen Sie die Schriftfamilie aus
Öffnen Sie zunächst die offizielle Website der Google -Schriftarten und wählen Sie die Schriftart aus, die Ihnen gefällt. Zum Beispiel haben wir die "gewählt"Hummer zwei" Schriftfamilie:
Schritt 2: Wählen Sie die Stile aus
Scrollen Sie als nächstes nach unten, um die Liste der Stile anzuzeigen. Fügen Sie sie Ihrer Sammlung hinzu, indem Sie auf die “klicken“+" Zeichen:
Schritt 3: Ausgewählte Familien anzeigen
Um die ausgewählten Familien anzuzeigen, klicken Sie auf das unten hervorgehobene Symbol:
Schritt 4: Kopieren Sie den Link zum Einbetten in die HTML
Scrollen Sie danach nach unten und kopieren Sie den Link der Schriftfamilie mit dem hervorgehobenen “Kopieren" Symbol:
So verwenden Sie Google -Schriftarten in der CSS -Datei?
Um die Kopie von Google -Schriftarten in CSS für das Styling zu verwenden, gehen Sie die angegebenen Beispiele durch.
Beispiel 1
Einbeziehen " "Die beste Tutorial -Website" Um die Google -Schriftarten zu importieren, fügen Sie den kopierten Code in die “ein”Tag der HTML -Datei: Stil „P“ Element Die folgenden erläuterten CSS -Eigenschaften werden auf die HTML angewendet Das Bild zeigt, dass die Schriftfamilie erfolgreich angewendet wird: Beispiel 2 Nehmen wir ein anderes Beispiel, um die zu importierenNerko eins”Google -Schriftart. Fügen Sie zu diesem Zweck erneut den Code für "Nerko One" ein" Element: Stil „P“ Element Der "Schriftfamilie","Schriftgewicht", Und "Schriftgröße"Immobilien werden auf die HTML angewendet" Ausgang Wir haben Ihnen beigebracht, wie Sie Google Web -Schriftarten in der CSS -Datei importieren können. Abschluss Um Google -Schriftarten in CSS zu importieren, besuchen Sie zunächst die offizielle Website von Google Fonts und wählen Sie den Schriftart Stil aus. Kopieren Sie dann den Code, der das enthält “@importierenKeyword und fügen Sie es in die CSS -Datei oder in "in" einElement der HTML -Datei. Diese Studie hat das vollständige Verfahren zum Importieren von Google -Schriftarten in eine CSS -Datei gezeigt. @import URL ('https: // Schriftarten.googleapis.com/css2?familie = lobster+zwei: ital@1 & display = Swap ');
P
Schriftfamilie: "Hummer zwei", kursiv;
Text-Align: Mitte;
Schriftgröße: 45px;
Farbe: RGBA (64, 3, 162, 0.8);
@import URL ('https: // Schriftarten.googleapis.com/css2?family = nerko+One & familie = oswald: wght@500 & family = pacifico & display = swap ');
P
Schriftfamilie: 'Nerko One', kursiv;
Schriftgewicht: 300;
Schriftgröße: 30px;