In der Webentwicklung verleiht die richtige Verwendung des Schriftstils der Anwendung ein attraktives Aussehen. Diese Schriftstile geben visuelle Hinweise auf die Lesereihenfolge des Dokuments. Beispielsweise muss der Schriftstil der Dokumentüberschrift fett und signifikant von anderen sein. Das Styling hilft auch, wichtige Inhalte von anderen zu unterscheiden.
Die Lernergebnisse dieses Artikels sind:
- Was sind Google Webfonts?
- Wie importiere ich Google Fonts in HTML?
- Wie verwende ich Google Fonts in einer CSS-Datei?
Was sind Google Webfonts?
Google Web Font ist eine Open-Source-Bibliothek, die Hunderte von Schriftstilen oder -familien enthält. Es bietet auch APIs, die uns helfen, Webfonts mit Android und CSS zu verwenden. Google Fonts sind viel leichter als andere Schriftbibliotheken und für die geschäftliche Nutzung kostenlos verfügbar. Diese sind auf jeder Website einfacher zu implementieren.
Standardmäßig bietet CSS Fantasy-, Serif-, Sans-Serif-, Cursive- und Monospace-Schriftstile. Google Fonts können verwendet werden, wenn Sie andere Schriftarten verwenden möchten.
Wie importiere ich Google Fonts in HTML?
Führen Sie die folgenden Schritte aus, um Google Fonts auf einer HTML-Seite zu verwenden.
Schritt 1: Wählen Sie die Schriftfamilie aus
Öffnen Sie zunächst die Google-Schriftarten offizielle Website und wählen Sie die gewünschte Schriftart aus. Wir haben uns zum Beispiel für „ 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 „ + ' 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 den HTML-Code
Scrollen Sie danach nach unten und kopieren Sie den Link der Schriftfamilie mit dem hervorgehobenen „ Kopieren ' Symbol:
Wie verwende ich Google Fonts in der CSS-Datei?
Um die Kopie von Google Fonts in CSS für das Styling zu verwenden, gehen Sie die angegebenen Beispiele durch.
Beispiel 1
Fügen Sie ein „ ”-Element, um einen Inhalt oder Absatz anzugeben:
< p > „Die beste Tutorial-Website“ p > Um die Google Fonts zu importieren, fügen Sie den kopierten Code in das „
Style „p“-Element
p {Schriftfamilie: 'Hummer Zwei' , kursiv;
Textausrichtung: Mitte;
Schriftgröße: 45px;
Farbe: RGB ( 64 , 3 , 162 , 0,8 ) ;
}
Die folgenden erklärten CSS-Eigenschaften werden auf das HTML angewendet: „ ' Schild:
- „ Schriftfamilie ” wird der Wert zugewiesen “ „Lobster Two“, kursiv “. Diese Schriftfamilie wird aus Google Fonts importiert.
- „ Textausrichtung ” passt die Textausrichtung an.
- „ Schriftgröße “ legt die Schriftgröße fest.
- „ Farbe “ legt die Schriftfarbe fest.
Das Bild zeigt, dass die Schriftfamilie erfolgreich angewendet wurde:
Beispiel 2
Nehmen wir ein weiteres Beispiel zum Importieren der „ Nerko Eins ” Google-Schriftart. Fügen Sie zu diesem Zweck erneut den Code für die „Nerko One“-Google-Font-URL in das „
Style „p“-Element
p {Schriftfamilie: 'Nerko Eins' , kursiv;
Schriftstärke: 300 ;
Schriftgröße: 30px;
}
Die ' Schriftfamilie “, „ Schriftstärke ', und ' Schriftgröße „Eigenschaften werden auf das HTML angewendet“ ' Element.
Ausgabe
Wir haben Ihnen beigebracht, wie Sie Google Webfonts in die CSS-Datei importieren.
Fazit
Um Google Fonts in CSS zu importieren, besuchen Sie zuerst die Google-Schriftarten offizielle Website und wählen Sie den Schriftstil aus. Kopieren Sie dann den Code, der das „ @importieren “ Schlüsselwort und fügen Sie es in die CSS-Datei oder in das “