Beberapa CSS Untuk Ubah Gaya Teks (Ketebalan & Jarak)

Saya nak kongsi 3 kod/rule CSS untuk tweak sikit gaya dan rupa teks dalam entri blog—mungkin font dah cantik tapi ketebalan dan jarak huruf tu tak berapa menarik di mata.

3 CSS tu ialah:

  • letter-spacing
  • word-spacing
  • font-weight

Saya akan sasarkan pada .post-body sebab nak ubah teks dalam kawasan entri tu saja, bukan di kawasan lain.

Saya tak guna p (contoh, p {letter-spacing: 0.3px;}) sebab di Blogger, kadang-kadang perenggan tiba-tiba guna <div> tanpa kita sedar, jadi CSS tu tak berfungsi.

Huruf p tu maksudnya paragraph (perenggan).

$ads={1}

Untuk letter-spacing, kita ubah jarak antara huruf tu, nak bagi dia makin jauh atau dekat. Contohnya, nak tambah jarak antara huruf:

.post-body {letter-spacing: 0.3px;}

Kalau nak buat huruf-huruf makin dekat, masukkan nilai negatif. Contohnya, -0.5px.

Untuk word-spacing, kita guna untuk ubah jarak antara perkataan. Sebagai contoh, untuk besarkan jarak:

.post-body {word-spacing: 1.5px;}

Sama juga, guna nilai negatif untuk dekatkan jarak perkataan.

Dan untuk font-weight pula, ia buatkan huruf semakin tebal atau nipis. Ada sesetengah jenis font masih kelihatan terlalu nipis walaupun saiznya dah dibesarkan.

Contoh rule:

.post-body {font-weight: 500;}

Ketebalan default selalunya bernilai 400. Saya sarankan CSS ini diguna untuk naikkan ketebalan saja, pada nilai 450 atau 500, tak lebih dari itu, sebab nanti terlalu dekat dengan saiz bold (700).

Boleh gabungkan semua dalam 1 rule. Contoh:

.post-body {letter-spacing: 0.3px; word-spacing: 1.5px; font-weight: 500;}

Kalau tak menjadi, cuba guna #post-body untuk gantikan .post-body.

Masukkan CSS ni di:

Theme → Customize → Advanced → Add CSS

Walaupun saya berusaha untuk menyediakan maklumat yang tepat dan berguna, saya tidak dapat menjamin bahawa semua maklumat adalah lengkap, tepat atau terkini.

Komen adalah tanggungjawab anda, disarankan berbentuk sopan.

Diminta kerjasama untuk tidak memasukkan sebarang URL.

Catat Ulasan (0)
Terbaru Lebih lama