fontWeight özelliği, yazı tipinin kalınlığının belirlenmesini sağlar.
DOM Sözdizimi
element.style.fontWeight = "kalinlik"
CSS Sözdizimi
font-weight: kalinlik
| kalinlik | Aşağıdaki değerlerden birini alarak fontun kalınlığını belirler. |
CSS font-weight Kalınlık Değerleri
| font-weight: | Örnek | Açıklama |
|---|
| normal |
myNotlar |
Normal kalınlıkta yazı tipi. 400 değeri ile aynı. |
| bold |
myNotlar |
Kalın yazı tipi. 700 değeri ile aynı. |
| bolder |
myNotlar |
Ana elementinin yazı kalınlığından bir kademe daha kalın. |
| lighter |
myNotlar |
Ana elementinin yazı kalınlığından bir kademe daha ince. |
| 100 |
myNotlar |
Normal kalınlık. |
| 200 |
myNotlar |
Normal kalınlık. |
| 300 |
myNotlar |
Normal kalınlık. |
| 400 |
myNotlar |
Normal kalınlık. |
| 500 |
myNotlar |
Normal kalınlık. |
| 600 |
myNotlar |
Normal ile Kalın arası kalınlık. (IE ve Opera) |
| 700 |
myNotlar |
Kalın yazı tipi. |
| 800 |
myNotlar |
Kalın yazı tipi. |
| 900 |
myNotlar |
Kalın yazı tipi. |
Sayısal değerler, teoride 400 değerinin normal kalınlık olduğu varsayılarak 100 en ince, 900 en kalın yazı tipi kalınlığı olacak şekilde fontun kalınlığını belirler. Fakat, pratikte font boyu ne olursa olsun 100-500 değerleri normal font kalınlığını 700-900 değerleri kalın fontu belirler. 600 değeri ise Internet Explorer ve Opera tarayıcılarında normal ile kalın arasında bir gösterime sahiptir.
Aşağıdaki örnek, CSS font-weight özellliği ile font kalınlığı 600 olarak belirlenmiş bir paragraf içinde bolder ve lighter değerlerinin farklarını göstermektedir.
<style type="text/css">
.ornekbolder {
font-weight: bolder;
}
.orneklighter {
font-weight: lighter;
}
.ornek600
{
font-weight: 600;
font-size: 1.5pc;
}
</style>
<p class="ornek600">
<span class="ornekbolder">"bolder"</span> ve
<span class="orneklighter">"lighter"</span> değerleri
ana elementin yazı kalınlığına göre ayarlanmaktadır.</p>
Canlı Sonuç
"bolder" ve "lighter" değerleri ana elementin yazı kalınlığına göre ayarlanmaktadır.