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 :

   <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:

<div class="content">
  <h1>Welcome to Our Blog</h1>
  <h2>Latest Updates</h2>
  <p class="intro">Stay updated with the latest trends in web development, design, and more.</p>
  <p>Explore articles, tutorials, and resources to help you master the art of web design.</p>
</div>

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!