CSS Dersleri - Font Özellikleri

Bir Önceki Dersimizde CSS Zemin Özelliklerini Anlatmıştım. Bugün İse Font Özelliklerini Anlatacağım. Bir Önceki Dersimize Buradan Ulaşabilirsiniz.

CSS Font Özellikleri

Font özellikleri web sayfamızdaki metinlerin font ailesini, boyutunu, kalınlık ayarlarını, büyük-küçük harf olmasını ve stilini değiĢtirmek için kullanılır. Bu özellikler; 

• font-family : Yazı Tipini Belirler.
• font-size : Yazı Boyutunu Belirler.
• font-weight : Yazının Kalınlığını Belirler.(Bold Vs.)
• font-style : Yazının Stilini Belirler (İtalik Vs.)
• line-height : Satırlar Arası Mesafe Ayarı.

Yazı Tipi(font-family)

"font-family" Yazının Tipini Belirler. Font Ailesinden Seçeriz. Yani Aşağıdaki Gibi;

p{

font-family: Verdana, Arial, Helvetica, sans-serif;

}

Yukarıdaki Örnekte Tarayıcı İlk Önce Verdana Yazı Tipini Destekler mi Ona Bakar. Desteklenmez İse Diğer Yazı Tipini Seçer.

h3{

font-family: Georgia, "Times New Roman", sans-serif; 

}

Yukarıda İse "Times New Roman" Tırnak İçindedir. Eğer Font Ailesinde Adı Birden Fazla Kelimeden Oluşuyorsa Tırnak İçine Alınır.

Yazı Boyutu(font-size)

“font-size” yazı karakterlerinin, dolayısıyla da metnin boyutunu ayarlamaya yarar. Boyutu piksel olarak " px " , yüzde olarak " % " ya da " em " ile belirtebiliriz. Örnek;

body {font-size:100%;} = varolan font boyutunun tamamını(%100) kullan. 

h1 {font-size:2.5em;} = h1 için font boyutu(2.5em=2.5*16px =40px)belirler.

h2 {font-size:25px;} = h2 için font boyutu(25px) belirler.   

Yazı Kalınlığı(font-weight)

“font-weight” özelliği, fontun kalınlık, incelik değerini belirlemeye yarar.100 (ince)- 900 (kalın) arasında bir değer alabildiği gibi bold, bolder, normal ve lighter değerlerini de alabilir. Örneğin;

p{

font-weight: bold; 

} 

Yukarıda p Etiketinin İçindeki Bütün Yazıyı Kalın Olarak Yazar.

Yazı Stili(font-style)

"font-style" özelliği, metni eğik (italik), az eğik veya normal yapmak için kullanılır.Örneğin;

p { font-style:italic; } = Metin italik yani eğik yazı olarak görünür.

p { font-style:normal; } = Metin normal görünür.

p { font-style:oblique; } = Metin az eğik görünür(Çok fazla desteklenmez.).

Satırlar Arası Mesafe(line-height)

“line-height” özelliği, metin içindeki satırların arasındaki mesafeyi ayarlamak için kullanılır. Örneğin;

p{

line-height: 15px;

} 

Yukarıda p Etiketi İçindeki Satırların Arasındaki Mesafeyi 15 px Yapar. 

Anahtar Kelimeler: bilgi, bilgi tohumu, CSS, css dersleri, CSS Dersleri - Font Özellikleri, Font Özellikleri, font-family, font-size, font-style, font-weight, line-height, tohumu