Jak zaimportować Google Web Font w CSS?
W tworzeniu stron internetowych prawidłowe użycie stylizacji czcionek zapewnia atrakcyjny wygląd aplikacji. Te style czcionek dają wizualne wskazówki dotyczące zamówienia czytania dokumentu. Na przykład styl czcionki nagłówka dokumentu musi być odważny i znaczący od innych. Stylizacja pomaga również odróżnić ważną treść od innych.
Wyniki uczenia się tego artykułu to:
- Jakie są czcionki internetowe Google?
- Jak zaimportować czcionki Google w HTML?
- Jak korzystać z czcionek Google w pliku CSS?
Jakie są czcionki internetowe Google?
Google Web Font to biblioteka typu open source, która zawiera setki stylów lub rodzin czcionek. Zapewnia również interfejsy API, które pomagają nam korzystać z czcionek internetowych z Androidem i CSS. Czcionki Google są znacznie lżejsze niż inne biblioteki czcionek i dostępne bezpłatnie do użytku biznesowego. Łatwiej je wdrożyć na dowolnej stronie internetowej.
Domyślnie CSS oferuje style czcionek Fantasy, Serif, Sans Serif, Cursive i Monospace. Czcionki Google można wykorzystać, jeśli chcesz używać innych stylów czcionek.
Jak zaimportować czcionki Google w HTML?
Aby korzystać z Google Fonts na stronie HTML, przejrzyj następujące kroki.
Krok 1: Wybierz rodzinę czcionek
Najpierw otwórz oficjalną stronę Google Fonts i wybierz czcionkę, którą lubisz. Na przykład wybraliśmy „Homar dwa" rodzina czcionek:
Krok 2: Wybierz style
Następnie przewiń w dół, aby wyświetlić listę stylów. Dodaj je do swojej kolekcji, klikając „+" podpisać:
Krok 3: Wyświetl wybrane rodziny
Aby wyświetlić wybrane rodziny, kliknij ikonę podświetloną poniżej:
Krok 4: Skopiuj link do osadzenia w HTML
Następnie przewiń w dół i skopiuj link do rodziny czcionki za pomocą podświetlonego „Kopiuj" Ikona:
Jak wykorzystać czcionki Google w pliku CSS?
Aby użyć kopii czcionek Google w CSS do stylizacji, przejrzyj podane przykłady.
Przykład 1
Obejmują „ „Najlepsza strona internetowa samouczka” Aby zaimportować czcionki Google, wklej skopiowany kod w „„Tag pliku HTML: Style „P” Po wyjaśnieniu właściwości CSS są stosowane do HTML ” Obraz pokazuje, że rodzina czcionek jest z powodzeniem zastosowana: Przykład 2 Weźmy kolejny przykład, aby zaimportować „Nerko One„Czcionka Google. W tym celu ponownie wklej kod „Nerko One” Google Font URL w „" element: Style „P” „„rodzina czcionek”,„grubość czcionki", I "rozmiar czcionki„Właściwości są stosowane do HTML” Wyjście Nauczyliśmy cię, jak importować czcionki internetowe Google w pliku CSS. Wniosek Aby zaimportować czcionki Google w CSS, najpierw odwiedź oficjalną stronę Google Fonts i wybierz styl czcionki. Następnie skopiuj kod zawierający „@import”Słowo kluczowe i wklej je w pliku CSS lub w„„Element pliku HTML. To badanie wykazało pełną procedurę importowania czcionek Google do pliku CSS. @Import URL („https: // czcionki.Googleapis.COM/CSS2?Family = Lobster+dwa: ital@1 & display = swap ');
P
FONT-FAMILY: „Lobster dwa”, kursywa;
Text-Align: Center;
Rozmiar czcionki: 45px;
Kolor: RGBA (64, 3, 162, 0.8);
@Import URL („https: // czcionki.Googleapis.COM/CSS2?rodzina = Nerko+One & Family = Oswald: Wght@500 & Family = Pacifico & Display = swap ');
P
FONT-FAMILY: „Nerko One”, Kursive;
czcionek: 300;
Rozmiar czcionki: 30px;