Jak używać czcionek Google w HTML i CSS

Istnieje wiele czcionek dostępnych w HTML i CSS, ale jeśli nie jesteś zadowolony ze standardowych czcionek HTML/CSS i wybierz nowe, świeże i najnowsze czcionki, możesz użyć czcionek Google. Google Font to biblioteka internetowa Google, która pozwala nam korzystać z różnych rodzin czcionek za pośrednictwem CDN (akronim sieci dostarczania treści), która jest bezpłatna dla każdego.

Ten zapis poprowadzi Cię w następujących aspektach dotyczących czcionek Google:

• Przewodnik krok po kroku dla czcionek Google
• Jak korzystać z różnych czcionek Google
• Jak stylizować czcionki Google

Przewodnik krok po kroku dla czcionek Google

Aby korzystać z czcionek Google, musisz wykonać następujące kroki:

Pierwszy krok
Odwiedź oficjalną stronę Google Fonts i pojawi się następujące okno:

Drugi krok
Wybierz wybraną przez siebie rodzinę kategorii/ czcionki:

Trzeci krok
Wybierz wybraną czcionkę Google (e.G. Quintessentia):

Teraz kliknij „Wybierz ten styl”:

Czwarty krok
Skopiuj link wybranego stylu z okna, który pojawia się po prawej stronie ekranu:

Wklej link w sekcji głównej dokumentu HTML:

Piąty krok
Skopiuj zasady CSS dla rodziny

I wklej go w pliku CSS:

Chcemy zastosować styl na

Element, więc wklejamy go w selektorze P. Teraz otrzymamy następujące dane wyjściowe:

Dane wyjściowe pokazuje, że czcionka Google „kwintesencja” jest zaimplementowana na

element pomyślnie.

Jak korzystać z różnych czcionek Google

Cała procedura będzie taka sama, wybierz wiele czcionek Google, skopiuj link i wklej go w sekcji główki pliku HTML:

Html

Czcionki CSS

Pierwszy paragraf

Akapit drugi

CSS

Teraz wybieramy dwie różne czcionki Google i.mi. „Kołokorter” i „Open Sans”, chcemy użyć „Comborter” dla

element i „otwarte sans” dla

elementy. Tak więc nasz CSS będzie wyglądał tak:

H3
Font-family: „Comborter”, kursywa;

P
Font-family: „Open Sans”, bez Serif;

W pliku CSS wklej reguły CSS w selektorach elementów, aby je stylizować zgodnie z wyborem. Przyniesie następujące dane wyjściowe:

Wyjście dowodzi, że reguły CSS są z powodzeniem wdrażane na elementach HTML.

Jak stylizować czcionki Google

Za pomocą właściwości CSS możemy stylizować czcionki Google zgodnie z naszym wyborem, nasz plik HTML pozostanie taki sam, a plik CSS będzie wyglądał tak:

CSS

H3
Font-family: „Comborter”, kursywa;
kolor czerwony;
Tekst-shadow: 5px 5px 5px #83647e;

P
Font-family: „Open Sans”, bez Serif;
kolor czerwony;
Tekst-shadow: 5px 5px 5px #83647e;

Wyjście wyżej podarowanego fragmentu pojawi się w ten sposób:

Wniosek

Aby dodać czcionki Google, wyszukaj czcionki Google, wybierz kategorię czcionki i rodzinę, a następnie wybierz wybrany styl czcionki. Po wybraniu czcionki „Skopiuj link czcionki”, z „Windows wybranych rodzin” i wklej ją w sekcji głównej pliku HTML. Następnie skopiuj „Reguły CSS dla linku czcionek” i wklej je do selektora CSS. Stylizacja można dodać do czcionek Google za pomocą właściwości CSS.