Pengertian
Font style dalam CSS adalah cara untuk mengatur tampilan teks pada elemen HTML. Ini meliputi pengaturan jenis huruf (font family), gaya huruf (italic atau normal), ketebalan huruf (bold atau normal), ukuran huruf, dan dekorasi teks seperti garis bawah atau garis atas.
Macam – macam Font style
Berikut adalah penjelasan lebih detail mengenai beberapa properti utama dalam CSS yang berkaitan dengan font style:
- font-family: Properti ini digunakan untuk menentukan jenis huruf yang akan digunakan untuk teks di dalam elemen. Contoh penggunaannya:
Dalam contoh ini, teks di dalam elemen <p> akan menggunakan jenis huruf “Arial”. Jika “Arial” tidak tersedia pada sistem pengguna, maka jenis huruf alternatif dari keluarga “sans-serif” akan digunakan sebagai cadangan.
2. font-style: Properti ini mengontrol gaya teks seperti normal, italic, atau oblique. Contoh penggunaannya:
Dengan pengaturan ini, teks di dalam elemen <p> akan ditampilkan dalam gaya huruf miring (italic).
3. font-weight: Properti ini digunakan untuk mengatur ketebalan huruf, seperti normal atau bold. Contoh penggunaannya:
Dalam contoh di atas, teks di dalam elemen <p> akan ditampilkan dengan huruf tebal (bold).
4. text-decoration: Properti ini digunakan untuk menambahkan dekorasi ke teks, seperti garis bawah atau garis atas. Contoh penggunaannya:
Dalam contoh di atas, teks di dalam elemen <p> akan ditampilkan dengan garis bawah.
Menggunakan properti-properti ini, pengembang dapat mengendalikan tampilan teks secara detail sesuai dengan desain yang diinginkan. Hal ini penting untuk meningkatkan estetika dan konsistensi tampilan teks pada halaman web, serta memastikan keterbacaan dan pengalaman pengguna yang optimal.
5. font-size
Properti font-size menentukan ukuran huruf dari teks di dalam elemen. Ukuran huruf bisa ditentukan dalam nilai piksel (px), em, rem, atau persen (%). Contoh penggunaannya:
Dalam contoh ini, teks dalam elemen dengan kelas .paragraph akan memiliki ukuran huruf sebesar 16 piksel. Pengaturan ukuran huruf ini dapat disesuaikan untuk menciptakan hierarki visual yang jelas antara judul, teks paragraf, dan teks yang kurang penting dalam halaman web.
Mengapa Font Style Penting?
Penggunaan yang tepat dari properti font style dalam CSS membantu menciptakan pengalaman pengguna yang lebih baik dengan meningkatkan keterbacaan, memperkuat hierarki visual, dan menyampaikan pesan dengan lebih jelas. Dengan mengontrol jenis huruf, gaya huruf, ketebalan, ukuran, dan dekorasi teks, pengembang web dapat menghasilkan tata letak yang menarik dan mudah dimengerti bagi pengguna.
Kesimpulan
Font style dalam CSS adalah cara yang digunakan untuk mengatur penampilan teks pada elemen HTML. Ini meliputi beberapa properti utama seperti jenis huruf (font family), gaya huruf (italic atau normal), ketebalan huruf (bold atau normal), ukuran huruf, dan dekorasi teks seperti garis bawah atau garis atas. Misalnya, dengan menggunakan properti font-family, pengembang dapat menentukan jenis huruf seperti “Arial” atau alternatif “sans-serif” jika jenis huruf utama tidak tersedia. Properti font-style mengatur apakah teks akan ditampilkan dalam gaya miring atau tidak, sementara font-weight mengatur ketebalan huruf seperti bold. Properti text-decoration digunakan untuk menambahkan dekorasi seperti garis bawah pada teks. Properti font-size menentukan ukuran huruf dalam piksel, em, rem, atau persen. Menggunakan properti-properti ini dengan tepat tidak hanya meningkatkan estetika dan konsistensi tampilan teks pada halaman web, tetapi juga memperkuat keterbacaan dan hierarki visual, yang secara keseluruhan meningkatkan pengalaman pengguna dalam navigasi dan konsumsi konten online.
Referensi::https://sko.dev/referensi/css/font-style-pada-css#:~:text=Font%2Dstyle%20adalah%20properti%20CSS,font.%20Seperti%20kemiringan%20atau%20ketebalan.
Penulis::Beni irawan