CSS FONT ÖZELLİKLERİ

Font özellikleri, web sayfamızdaki metinlerin font ailesini, boyutunu, kalınlık ayarlarını, satırlar arası mesafeyi ve stilini değiştirmek için kullanılır. Bu özellikler:

• font-family
• font-size
• font-weight
• font-style
• line-height
• font

CSS FONT AİLESİ

font-family özelliği, bir metne ait font ailesini belirlemeye yarar. Bunu yaparak yazı tipimizi seçmiş oluruz. Bu özellik birden fazla font ailesi ismi içerebilir, her font ailesi ismi virgülle ayrılır.

ÖRNEK 1:

 p { 
    font-family:  Verdana, Arial, Helvetica, sans-serif; 
   }

Yukarıdaki örnekte tarayıcı ilk önce Verdana yazı tipinin tarayıcı tarafından desteklendiğine bakacaktır. Desteklenmediği takdirde sırayla diğerlerini deneyecektir.

ÖRNEK 2:

 h2{ 
    font-family:  Georgia, "Times New Roman", serif; 
   }
 

Bu örnekte ise görüldüğü üzere Times New Roman tırnak içine alınmıştır. Eğer bir font ailesinin adı bir kelimeden fazla ise tırnak işaretleri içine alınmalıdır.

CSS FONT BOYUTU

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

Em boyutu W3C tarafından önerilmektedir; Çünkü kullanıcı tarayıcıdan metin boyutlandırması yaptığında sayfamızda ki metinlerin boyutu da değişikliğe göre ufalıp büyüyebilecektir. ( 16px, 1em 'e eşittir. 16px=1em ). Piksel bölü 16 yazılarak em bulunabilir ( piksel/16=em ).

Standart olarak kullanabileceğimiz değerler şunlardır:

• xx-small (çok çok küçük)
• x-small (çok küçük)
• small (küçük)
• medium (orta)
• large (büyük)
• x-large (çok büyük)
• xx-large (çok çok büyük)

CSS:

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.*/

span{font-size:small} /*yazı küçük belirlendi */
   
p{font-size:100%;} /* varolan font boyutunun tamamını(%100) kullan. */

HTML:

<h1>Birinci Seviye Başlık</h1>

<h2>İkinci Seviye Başlık</h2>

<span>Bu bir deneme yazısı</span>

<p> varolan font(16px) boyutunun tamamını(%100) kullan.</p>

ÇIKTI:

CSS FONT KALINLIĞI

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.

CSS:

p{ 
 font-weight: bold; 
 }

HTML:

<p>Bu bir deneme yazısı</p>

ÇIKTI:

Yukarıdaki örnekte p etiketi içinde yer alan yazının tamamının kalın yazılması sağlanmıştır.

FONT SİTİLİ

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

 p{ font-style:normal}/* Metin normal görünür. */
 
 p{ font-style:italic}/* Metin italik yani eğik yazı olarak görünür. */
 
 p{ font-style:oblique}/* Metin az eğik görünür. */

SATIRLAR ARASI MESAFEYİ AYARLAMA

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

CSS:

 p{line-height:25px;width:140px;}/*Satırlar arası mesafeyi 25 px yapar.*/
 

HTML:

<p>Bu bir deneme yazısı Bu bir deneme yazısı</p>

ÇIKTI:

Font

Kısaltma işlemini yaparken aşağıdaki söz dizimi kullanılır:

font: font-style-> font-weight-> font-size/line-height-> font-family :

Örnek olarak aşağıdaki özellikler olsun:

CSS:

p{
   font-weight: bold; 

   font-family: verdana, sans-serif; 

   font-size: 16px; 

   line-height: 15px;
}
 

Kısaltma olarak kullanılan kod ise tek satır:

CSS:

p{font: bold 16px/15px verdana, sans-serif}