Bu ders boyunca, “font” ile ilgili en yaygın kullanılan özellikleri ve nasıl kullanılacağını ele alacağız.
Yazı Tipi Ailesi (font-family)
“font-family” özelliği, metnin yazı tipini belirlemek için kullanılır. Bu özellik, metni hangi yazı tipi ailesiyle görüntülemek istediğinizi belirtmenizi sağlar. Örneğin, Arial, Times New Roman, Verdana gibi yazı tipleri kullanılabilir. Birden çok yazı tipi belirtilirse, tarayıcı listedeki yazı tiplerini sırayla kontrol ederek mevcut olanı kullanır. Aşağıdaki örnekte, “font-family” özelliği “Arial, sans-serif” olarak ayarlanmıştır.
p {
font-family: Arial, sans-serif;
}
Bu örnekte, eğer Arial yazı tipi mevcut değilse, tarayıcı sans-serif yazı tipini kullanacaktır.
Yazı Boyutu (font-size)
“font-size” özelliği, metnin yazı boyutunu belirlemek için kullanılır. Bu özellik, metnin görüntüleneceği piksel veya yüzde değerini belirlemenizi sağlar. Aşağıdaki örnekte, “font-size” özelliği “16px” olarak ayarlanmıştır.
p {
font-size: 16px;
}
Metin boyutu, sayfanın genel tasarımına uyacak şekilde değiştirilebilir.
Yazı Kalınlığı (font-weight)
“font-weight” özelliği, metnin yazı kalınlığını belirlemek için kullanılır. Bu özellik, “normal”, “bold”, “bolder”, “lighter” veya sayı değerleri kullanılarak belirtilebilir. Aşağıdaki örnekte, “font-weight” özelliği “bold” olarak ayarlanmıştır.
p {
font-weight: bold;
}
Yazı kalınlığı, metnin daha belirgin veya dikkat çekici olmasını sağlayabilir.
Yazı Stili (font-style)
“font-style” özelliği, metnin yazı stiline karar vermek için kullanılır. Bu özellik, “normal”, “italic” veya “oblique” değerlerini alabilir. Aşağıdaki örnekte, “font-style” özelliği “italic” olarak ayarlanmıştır.
p {
font-style: italic;
}
Bu özellik, metni eğik veya eğik bir görünüme dönüştürebilir.
Yazı Altı Çizgisi (text-decoration)
“text-decoration” özelliği, metnin altını çizmek veya diğer süslemeleri uygulamak için kullanılır. Bu özellik, “none”, “underline”, “overline”, “line-through” veya “blink” değerlerini alabilir. Aşağıdaki örnekte, “text-decoration” özelliği “underline” olarak ayarlanmıştır.
p {
text-decoration: underline;
}
Bu özellik, metnin altına bir çizgi ekleyerek vurgulama yapabilir.
Yazı Harf Aralığı (letter-spacing)
“letter-spacing” özelliği, metin içindeki harfler arasındaki boşluğu ayarlamak için kullanılır. Bu özellik, piksel veya em birimleriyle belirtilebilir. Aşağıdaki örnekte, “letter-spacing” özelliği “2px” olarak ayarlanmıştır.
p {
letter-spacing: 2px;
}
Bu özellik, metin içindeki harfler arasındaki mesafeyi değiştirerek metnin okunabilirliğini veya stilini etkileyebilir.
Özet
Bu ders boyunca, CSS’de “font” ile ilgili en yaygın kullanılan özellikleri ele aldık. “font-family”, “font-size”, “font-weight”, “font-style”, “text-decoration” ve “letter-spacing” özellikleri, metnin yazı tipi, boyutu, kalınlığı, stili, süslemeleri ve harf aralığı gibi çeşitli görünüm ayarlarını kontrol etmek için kullanılır.
Bu özellikler, metni istediğiniz şekilde biçimlendirmenizi ve web sayfanızın genel tasarımına uygun bir metin görünümü elde etmenizi sağlar.
