W programowaniu stron internetowych prawidłowe użycie stylów czcionek zapewnia atrakcyjny wygląd aplikacji. Te style czcionek dają wizualne wskazówki dotyczące kolejności czytania dokumentu. Na przykład styl czcionki nagłówka dokumentu musi być pogrubiony i wyróżniający się spośród innych. Stylizacja pomaga również odróżnić ważne treści od innych.
Efekty uczenia się tego artykułu to:
- Czym są czcionki internetowe Google?
- Jak zaimportować czcionki Google w formacie HTML?
- Jak wykorzystać czcionki Google w pliku CSS?
Czym są czcionki internetowe Google?
Czcionki internetowe Google to biblioteka typu open source zawierająca setki stylów lub rodzin czcionek. Zapewnia również interfejsy API, które pomagają nam używać czcionek internetowych w systemie Android i CSS. Czcionki Google są znacznie lżejsze niż inne biblioteki czcionek i dostępne bezpłatnie do użytku biznesowego. Są one łatwiejsze do wdrożenia na dowolnej stronie internetowej.
Domyślnie CSS oferuje style czcionek fantasy, szeryfowe, bezszeryfowe, kursywą i o stałej szerokości. Czcionki Google mogą być używane, jeśli chcesz używać innych stylów czcionek.
Jak zaimportować czcionki Google w formacie HTML?
Aby użyć czcionek Google na stronie HTML, wykonaj następujące czynności.
Krok 1: Wybierz rodzinę czcionek
Najpierw otwórz Czcionki Google oficjalnej stronie internetowej 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 przycisk „ + ' 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 kodzie HTML
Następnie przewiń w dół i skopiuj link rodziny czcionek, używając podświetlonego „ Kopiuj ' Ikona:
Jak wykorzystać czcionki Google w pliku CSS?
Aby użyć kopii Google Fonts w CSS do stylizacji, przejrzyj podane przykłady.
Przykład 1
Dołącz „ ”, aby określić treść lub akapit:
< p > „Najlepsza strona z samouczkami” p > Aby zaimportować czcionki Google, wklej skopiowany kod w „
Element stylu „p”.
p {rodzina czcionek: „Homar dwa” , kursywa;
wyrównanie tekstu: środek;
rozmiar czcionki: 45px;
kolor: rgb ( 64 , 3 , 162 , 0,8 ) ;
}
Następujące wyjaśnione właściwości CSS są stosowane do kodu HTML „ ”znacznik:
- “ rodzina czcionek ” ma przypisaną wartość „ „Homar Dwa”, kursywą ”. Ta rodzina czcionek została zaimportowana z Google Fonts.
- “ wyrównanie tekstu ” dostosowuje wyrównanie tekstu.
- “ rozmiar czcionki ” określa rozmiar czcionki.
- “ kolor ” ustawia kolor czcionki.
Obraz pokazuje, że rodzina czcionek została pomyślnie zastosowana:
Przykład 2
Weźmy inny przykład, aby zaimportować „ Nerko Jeden Czcionka Google. W tym celu ponownie wklej kod adresu URL czcionki Google „Nerko One” w polu „
Element stylu „p”.
p {rodzina czcionek: „Nerko Jeden” , kursywa;
grubość czcionki: 300 ;
rozmiar czcionki: 30px;
}
„ rodzina czcionek ”, „ grubość czcionki ', oraz ' rozmiar czcionki ” właściwości są stosowane do kodu HTML „ ' element.
Wyjście
Nauczyliśmy Cię, jak importować czcionki internetowe Google w pliku CSS.
Wniosek
Aby zaimportować czcionki Google w CSS, najpierw odwiedź stronę Czcionki Google oficjalnej stronie internetowej i wybierz styl czcionki. Następnie skopiuj kod zawierający „ @import ” słowo kluczowe i wklej je do pliku CSS lub w „