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:

Birinci Seviye Başlık

İkinci Seviye Başlık

Bu bir deneme yazısı

varolan font(16px) boyutunun tamamını(%100) kullan.

Ç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:

Bu bir deneme yazısı

Ç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:

Bu bir deneme yazısı Bu bir deneme yazısı

Ç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:

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:

font: bold 16px/15px verdana, sans-serif; 
Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

1800

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
POPÜLER MAKALE
  • HTML RESME LİNK VERME
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML FORM OLUŞTURMA
  • HTML DİV ve SPAN NEDİR?
  • 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.