So verwenden Sie Google -Schriftarten in HTML und CSS

In HTML und CSS sind zahlreiche Schriftarten erhältlich. Google Font ist die Online -Bibliothek von Google, mit der wir verschiedene Schriftfamilien über CDN (Accononym of Content Delivery Network) verwenden können, das kostenlos für alle verwendet werden kann.

In dieser Beschreibung führen Sie die folgenden Aspekte in Bezug auf die Google-Schriftarten an:

• Schritt -für -Schritt -Anleitung für Google -Schriftarten
• So verwenden Sie verschiedene Google -Schriftarten
• So stylen Sie Google -Schriftarten

Schritt -für -Schritt -Anleitung für Google -Schriftarten

Um die Google -Schriftarten zu verwenden, müssen Sie die folgenden Schritte ausführen:

Erster Schritt
Besuchen Sie die offizielle Website von Google Fonts und das folgende Fenster wird angezeigt:

Zweiter Schritt
Wählen Sie die Kategorie/ Schriftfamilie Ihrer Wahl aus:

Dritter Schritt
Wählen Sie die Google -Schriftart Ihrer Wahl (e.G. Quintessentia):

Klicken Sie nun auf die "Wählen Sie diesen Stil":

Vierter Schritt
Kopieren Sie den Link des ausgewählten Stils aus dem Fenster, das auf der rechten Seite des Bildschirms angezeigt wird:

Fügen Sie den Link im Kopfabschnitt des HTML -Dokuments ein:

Fünfter Schritt
Kopieren Sie die CSS-Regeln für die Schriftfamilie

Und fügen Sie es in die CSS -Datei ein:

Wir möchten den Stil auf die anwenden

Element, also fügen wir es in den P -Selektor ein. Jetzt erhalten wir die folgende Ausgabe:

Die Ausgabe zeigt, dass die A -Google -Schrift „Quintessenz“ auf dem implementiert ist

Element erfolgreich.

So verwenden Sie verschiedene Google -Schriftarten

Die gesamte Prozedur ist gleich, wählen Sie die mehrere Google -Schriftarten aus, kopieren Sie den Link und fügen Sie ihn in den Abschnitt "HTML -Datei" ein:

Html

CSS -Schriftarten

Erster Paragraph

Zweiter Absatz

CSS

Jetzt wählen wir zwei verschiedene Google -Schriftarten i aus.e. "Tröster" und "Open Sans" wollen wir "Tröster" für die verwenden

Element und „offen“ für die

Elemente. Unsere CSS werden also so aussehen:

H3
Schriftfamilie: "Tröster", kursiv;

P
Schriftfamilie: "Open Sans", sans-serif;

Fügen Sie in der CSS -Datei die CSS -Regeln in Element Selectors ein, um sie entsprechend der Auswahl zu stylen. Es ergibt die folgende Ausgabe:

Die Ausgabe beweist, dass die CSS -Regeln erfolgreich in den HTML -Elementen implementiert werden.

So stylen Sie Google -Schriftarten

Mit Hilfe von CSS -Eigenschaften können wir die Google -Schriftarten gemäß unserer Wahl stylen, unsere HTML -Datei bleibt gleich und die CSS -Datei wird so aussehen:

CSS

H3
Schriftfamilie: "Tröster", kursiv;
Farbe Rot;
Text-Shadow: 5px 5px 5px #83647e;

P
Schriftfamilie: "Open Sans", sans-serif;
Farbe Rot;
Text-Shadow: 5px 5px 5px #83647e;

Die Ausgabe des oben gegebenen Snippets erscheint wie folgt:

Abschluss

Um Google -Schriftarten hinzuzufügen, suchen Sie nach den Google -Schriftarten, wählen Sie die Kategorie und Familie der Schriftart und wählen Sie den Schriftart Ihrer Wahl aus. Sobald Sie die Schriftart "den Schriftartkopie kopieren" ausgewählt haben, fügen Sie sie in den Fenster "Ausgewählte Familien" ein und fügen Sie sie in den Kopfabschnitt der HTML -Datei ein. Kopieren Sie als Nächst. Das Styling kann mit den CSS -Eigenschaften zu den Google -Schriftarten hinzugefügt werden.