Font-weight - Trik CSS

Daftar Isi

The font-weightproperti menetapkan berat badan, atau ketebalan, font dan tergantung baik pada wajah font yang tersedia dalam keluarga font atau bobot yang ditetapkan oleh browser.

span ( font-weight: bold; )

The font-weightproperti menerima baik nilai kunci atau nilai numerik ditentukan sebelumnya. Kata kunci yang tersedia adalah:

normal
bold
bolder
lighter

Nilai numerik yang tersedia adalah:

100
200
300
400
500
600
700
800
900

Nilai kata kunci normaldipetakan ke nilai numerik 400dan nilai bolddipetakan ke 700.

Untuk melihat efek apa pun menggunakan nilai selain 400atau 700, font yang digunakan harus memiliki wajah bawaan yang sesuai dengan bobot yang ditentukan.

Jika font memiliki versi tebal ("700") atau normal ("400") sebagai bagian dari keluarga font, browser akan menggunakannya. Jika itu tidak tersedia, browser akan meniru versi font tebal atau normal miliknya. Ini tidak akan meniru bobot lain yang tidak tersedia. Font sering kali menggunakan nama seperti "Biasa" dan "Ringan" untuk mengidentifikasi bobot font alternatif.

Demo berikut menunjukkan penggunaan nilai bobot alternatif:

Lihat Pena ini!

Demo di atas menggunakan font gratis Open Sans, yang disematkan menggunakan Google Web Fonts API. Font dimuat dengan semua bobot font yang tersedia dan karenanya, dengan menggunakan font-weightproperti, bobot berbeda yang tersedia ditampilkan seperti yang dijelaskan oleh setiap teks paragraf. Bobot yang tidak tersedia hanya menampilkan bobot terdekat secara logis.

Font umum seperti Arial, Helvetica, Georgia, dll. Tidak memiliki bobot selain 400dan 700. Jadi, demo yang sama yang ditampilkan dengan salah satu font tersebut hanya akan menampilkan dua bobot dalam sembilan paragraf.

Menggunakan kata kunci yang "lebih berani" dan "lebih ringan"

Nilai kata kunci bolderdan lighterrelatif terhadap bobot font yang dihitung dari elemen induk. Browser akan mencari bobot terdekat yang "lebih tebal" atau "lebih ringan", tergantung pada apa yang tersedia dalam keluarga font, jika tidak browser akan memilih "400" atau "700", tergantung mana yang paling masuk akal.

Elemen turunan tidak akan mewarisi nilai kata kunci yang "lebih tebal" dan "lebih ringan", tetapi akan mewarisi bobot yang dihitung.