Tipografi dan Penggayaan Fon dalam CSS

Kuliah 4: Tipografi dan Penggayaan Fon dalam CSS

Dalam kuliah ini, kita akan meneroka cara menggayakan teks menggunakan CSS. Tipografi ialah aspek kritikal reka bentuk web yang mempengaruhi kebolehbacaan, pengalaman pengguna dan estetika keseluruhan. Pada penghujung kuliah ini, anda akan tahu cara menggunakan pelbagai gaya fon dan mengawal penampilan teks di tapak web anda.

---

Memahami Fon Web

Fon web membolehkan anda menggunakan pelbagai muka taip di tapak web anda. Anda boleh menggunakan fon sistem yang telah diprapasang pada peranti atau anda boleh mengimport fon tersuai menggunakan perkhidmatan seperti Google Font.

1. Fon Sistem

Fon sistem boleh dipercayai kerana ia telah diprapasang pada kebanyakan peranti, tetapi ia mengehadkan pilihan reka bentuk anda.

• Contoh:

  body {
    font-family: Arial, sans-serif;
  }

2. Fon Google

Fon Google menawarkan pelbagai pilihan fon web yang boleh anda sepadukan dengan mudah ke dalam tapak web anda.

• Contoh:

  1. Pertama, masukkan pautan fon dalam HTML anda 93f0f5c25f18dab9d176bd4f6de5d30e:

   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
  

1. Kemudian, gunakan fon dalam CSS anda:
   

    body {
      font-family: 'Roboto', sans-serif;
    }
   

Sifat Fon dalam CSS

CSS menawarkan pelbagai sifat untuk menggayakan fon anda, termasuk saiz fon, berat, gaya dan banyak lagi.

1. Saiz Fon

Anda boleh mengawal saiz teks menggunakan sifat saiz fon.

• Contoh:

  h1 {
    font-size: 36px;
  }
  p {
    font-size: 16px;
  }

2. Berat Font

Sifat berat fon membolehkan anda menetapkan sejauh mana tebal teks dipaparkan.

• Contoh:

  h1 {
    font-weight: bold; /* Or use numeric values like 700 */
  }

3. Gaya Fon

Sifat gaya fon membolehkan anda mencondongkan teks.

• Contoh:

  em {
    font-style: italic;
  }

4. Varian Fon

Gunakan varian fon untuk memaparkan teks dalam huruf besar kecil.

• Contoh:

  p.caps {
    font-variant: small-caps;
  }

5. Ketinggian Garis

Sifat ketinggian garis mengawal ruang antara baris teks.

• Contoh:

  p {
    line-height: 1.5;
  }

6. Penjajaran Teks

Sifat penjajaran teks mengawal penjajaran mendatar teks dalam elemen.

• Contoh:

  h1 {
    text-align: center;
  }

7. Hiasan Teks

Sifat hiasan teks membolehkan anda menambah garis bawah, garis atas atau coretan pada teks.

• Contoh:

  a {
    text-decoration: underline;
  }

8. Bayang Teks

Anda boleh menambah kesan bayang pada teks anda menggunakan sifat bayang teks.

• Contoh:

  h2 {
    text-shadow: 2px 2px 5px gray;
  }

Contoh Praktikal:

Mari gabungkan sifat ini untuk menggayakan halaman web dengan tumpuan pada tipografi.

HTML:

5d1e94760349a02ec7e3e05385bc999a
  4a249f0d628e2318394fd9b75b4636b1Welcome to Our Blog473f0a7621bec819994bb5020d29372a
  c1a436a314ed609750bd7c7d319db4daLatest Updates2e9b454fa8428549ca2e64dfac4625cd
  03c914392195facb4bb03ef129401e65Stay updated with the latest trends in web development, design, and more.94b3e26ee717c64999d7867364b1b4a3
  e388a4556c0f65e1904146cc1a846beeExplore articles, tutorials, and resources to help you master the art of web design.94b3e26ee717c64999d7867364b1b4a3
16b28748ea4df4d9c2150843fecfba68

CSS:

/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');

body {
  font-family: 'Open Sans', sans-serif;
  color: #333;
  line-height: 1.6;
}

/* Heading Styles */
h1 {
  font-size: 36px;
  font-weight: 700;
  text-align: center;
  text-shadow: 2px 2px 4px #aaa;
}

h2 {
  font-size: 28px;
  font-weight: 700;
  margin-top: 20px;
}

/* Paragraph Styles */
p {
  font-size: 18px;
  margin-bottom: 15px;
}

.intro {
  font-style: italic;
  font-variant: small-caps;
  text-align: justify;
}

/* Centering the content */
.content {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

Dalam contoh ini:

• Fon Google "Open Sans" digunakan untuk semua teks.
• Tajuk (h1, h2) digayakan dengan saiz fon, pemberat dan bayang teks tertentu.
• Perenggan diberi saiz fon standard, dengan penggayaan khas digunakan pada kelas .intro, termasuk huruf condong dan huruf besar kecil.
• Kandungan berpusat pada halaman dengan lebar maksimum dan margin auto.

Amalkan Senaman

1. Buat halaman HTML dengan pelbagai tajuk dan perenggan.
2. Gunakan sifat fon yang berbeza untuk menggayakan teks anda.
3. Gunakan Fon Google untuk memberikan halaman web anda rupa yang unik.
4. Percubaan dengan penjajaran teks, hiasan dan kesan bayang-bayang.

---

Seterusnya: Dalam kuliah seterusnya, kita akan membincangkan Reka Letak CSS: Terapung, Kotak Flex dan Grid, di mana anda akan belajar cara membuat reka letak yang kompleks dan responsif untuk laman web anda. Nantikan!

---

Ikuti saya Di LinkedIn
Ridoy Hasan

Atas ialah kandungan terperinci Tipografi dan Penggayaan Fon dalam CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!