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:

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:

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

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:

css font

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}

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

3194

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML RESME LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML DİV ve SPAN NEDİR?
  • HTML FORM OLUŞTURMA
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML ARKAPLANA MÜZİK EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML RESİM EKLEME
  • PHP ceil()-floor()-round() YUVARLAMA FONKSİYONU
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.