CSS FONT ÖZELLİKLERİ - WebCebir

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} Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır. Lütfen Yukarıda ki mesajları okuyun tekrar aynı soruları sormayın.

4273

Gönder