css font-weight özelliği, yazının kalınlığını belirlemek için kullanırız. Metin işlemlerinde çok kullandığımız bir özelliktir.
Aldığı parametreler:
normal : Normal kalınlık değeri
bold : Kalın.
bolder : kalınlık değeri
lighter : Açık.
number : Rakam değeri( 100 – 900 arasında değerler kullanırız. Yüzün katları)
inherit : Bir üstteki elementten miras alır.
initial : Varsayılan değere çevirir.
Örnek :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div {
font-size: 24px;
margin-bottom: 10px;}
.one { font-weight:normal; }
.two { font-weight: bold; }
.three { font-weight: 700; }
.three-content { font-weight: bolder; }
.four { font-weight:lighter; }
.five { font-weight: 100; }
.six { font-weight:600; }
.seven { font-weight: 900; }
</style>
<body>
<div class="one">Tasarım ve Yazılım...</div>
<div class="two">Tasarım ve Yazılım...</div>
<div class="three">Tasarım ve <span class="three-content"> Yazılım...</span></div>
<div class="four">Tasarım ve Yazılım...</div>
<div class="five">Tasarım ve Yazılım...</div>
<div class="six">Tasarım ve Yazılım...</div>
<div class="seven">Tasarım ve Yazılım...</div>
</body>
</html>Html Çıktısı:
Not : bold ile bolder ve normal ile lighter aynı gibi gözükebilir. Ama bolder ve lighter bir üst elementin değerine göre hesaplanır. Örneğin bir üst elementte yazı kalınlığı 400 verip child elementte bolder verirseniz aradaki fark belli olur. lighter ve bolder çok kullanılmayan parametrelerdir.
Başka bir yazımızda görüşmek üzere…
