Dalam pembangunan web, penggunaan penggayaan fon yang betul memberikan rupa yang menarik kepada aplikasi. Gaya fon ini memberikan petunjuk visual tentang susunan bacaan dokumen. Sebagai contoh, gaya fon tajuk dokumen mestilah tebal dan ketara daripada orang lain. Penggayaan juga membantu membezakan kandungan penting daripada yang lain.
Hasil pembelajaran artikel ini adalah:
- Apakah Fon Web Google?
- Bagaimana untuk Mengimport Fon Google dalam HTML?
- Bagaimana untuk Menggunakan Fon Google dalam fail CSS?
Apakah Fon Web Google?
Fon web Google ialah perpustakaan sumber terbuka yang mengandungi ratusan gaya fon atau keluarga. Ia juga menyediakan API yang membantu kami menggunakan fon Web dengan Android dan CSS. Fon Google jauh lebih ringan daripada perpustakaan fon lain dan tersedia percuma untuk kegunaan perniagaan. Ini lebih mudah untuk dilaksanakan di mana-mana tapak web.
Secara lalai, CSS menawarkan gaya fon fantasi, serif, Sans serif, kursif dan monoangkasa. Google Fonts boleh digunakan jika anda suka menggunakan beberapa gaya fon lain.
Bagaimana untuk Mengimport Fon Google dalam HTML?
Untuk menggunakan Google Fonts pada halaman HTML, ikuti langkah berikut.
Langkah 1: Pilih Keluarga Font
Pertama, buka Fon Google laman web rasmi dan pilih fon yang anda suka. Sebagai contoh, kami telah memilih ' Lobster Dua ” font-family:
Langkah 2: Pilih Gaya
Seterusnya, tatal ke bawah untuk melihat senarai gaya. Tambahkannya pada koleksi anda dengan mengklik ' + ” tanda:
Langkah 3: Lihat Keluarga Terpilih
Untuk melihat keluarga yang dipilih, klik pada ikon yang diserlahkan di bawah:
Langkah 4: Salin Pautan ke Benam dalam HTML
Selepas itu, tatal ke bawah dan salin pautan fon-family menggunakan ' yang diserlahkan Salinan ikon ”:
Bagaimana untuk Menggunakan Fon Google dalam Fail CSS?
Untuk menggunakan salinan Google Fonts dalam CSS untuk penggayaan, lihat contoh yang diberikan.
Contoh 1
Sertakan ' ” elemen untuk menentukan beberapa kandungan atau perenggan:
< hlm > “Laman web tutorial terbaik” hlm > Untuk mengimport Google Fonts, tampal kod yang disalin dalam “
Gaya Elemen 'p'.
hlm {keluarga fon: 'Lobster Dua' , kursif;
text-align: tengah;
saiz fon: 45px;
warna: rgba ( 64 , 3 , 162 , 0.8 ) ;
}
Berikutan sifat CSS yang dijelaskan digunakan pada HTML “ ” tag:
- “ font-family 'diberikan dengan nilai ' 'Lobster Two', kursif ”. Keluarga fon ini diimport daripada Google Font.
- “ penjajaran teks ” melaraskan penjajaran teks.
- “ Saiz huruf ” menentukan saiz fon.
- “ warna ” menetapkan warna fon.
Imej menunjukkan bahawa keluarga fon berjaya digunakan:
Contoh 2
Mari kita ambil contoh lain untuk mengimport ' Nerko One ” Fon Google. Untuk tujuan ini, tampal sekali lagi kod untuk URL fon Google 'Nerko One' dalam '
Gaya Elemen 'p'.
hlm {keluarga fon: 'Nerko One' , kursif;
berat fon: 300 ;
saiz fon: 30px;
}
' font-family ”, “ berat fon ”, dan “ Saiz huruf sifat ' digunakan pada HTML ' ” unsur.
Pengeluaran
Kami telah mengajar anda cara mengimport fon web Google dalam fail CSS.
Kesimpulan
Untuk mengimport Google Fonts dalam CSS, mula-mula lawati Fon Google laman web rasmi dan pilih gaya fon. Kemudian, salin kod yang mengandungi “ @import ” kata kunci dan tampalkannya ke dalam fail CSS atau dalam “