30/12/2015

Properti CSS Font Weight

30/12/2015

Ketebalan huruf sangat diperlukan untuk menandai bebrapa kata atau kalimat yang dirasa penting, seperti judul artikel, sub judul, isitilah2 asing, dan lain sebagainya. Beberapa jenis Font biasanya memiliki variant ketebalan karakter teks pada level normal, sedang, tebal, dan sangat tebal. Namun, jenis font yang lain tidak memiliki variant ketebalan karakter teks pada level tertentu. Tingkat ketebalan karakter teks tersebut didefinisikan dengan nilai dari 100, 200, 300, hingga 900.

Fungsi Css Font Weight :: Mengatur Ketebalan Karakter Teks / Huruf

Properti CSS Font Weight digunakan untuk menentukan ketebalan huruf. Nilai dari font weight umumnya adalah normal dan bold. Seperti pada umumnya, nilai normal berarti ketebalan huruf masih berada dalam kategori normal, sedangkan bold akan menciptakan efek huruf yang lebih tebal dari pada nilai normal.
Nilai Properti CSS Font Weight Di samping nilai normal dan bold, terdapat nilai-nilai lain untuk properti CSS Font-Weight, di bawah ini nilai untuk font weight secara lengkap :

Nilai dengan Kata Kunci
  1. normal
  2. bold
  3. bolder
  4. lighter
Nilai dengan Angka
  1. 100
  2. 200
  3. 300
  4. 400
  5. 500
  6. 600
  7. 700
  8. 800
  9. 900
Contoh Sintaks CSS Font Weight

Sintaks CSS Font Weight

span {font-weight: normal}
span {font-weight: bold}
span {font-weight: bolder}
span {font-weight: lighter}
span {font-weight: 400}
Sebagai catatan, nilai dengan kata kunci normal setara dengan nilai angka 400, sedangkan nilai dengan kata kunci bold setara dengan nilai angka 700.

Efek ketebalan font dengan nilai angka-angka di atas akan terlihat jika sebuah font benar-benar meliki versi ketebalan pada masing-masing rentang nilai 100 - 900. Namun jika font tidak memilikinya, maka browser hanya akan menampilkan versi normal untuk nilai angka maksimal 400, untuk nilai yang lebih besar dari 400, browser akan menampilkan versi bold. Font standar seperti Times New Roman, Arial, Tahoma, Georgia, dll tidak memiliki versi ketebalan selain di nilai angka 400 dan 700.
Contoh Penerapan Sintaks CSS Font Weight Di bawah ini, saya sertakan contoh penggunaan CSS Font Weight menggunakan font Open Sans yang saya ambil dari google font dengan model penulisan Eksternal CSS.