CSS FONT ÖZELLİKLERİ

Merhaba...

Css ile sayfadaki metin ve yazılara bir çok farklı özellik ekleyebiliyoruz.. HTML etiketleri ile yapılan tüm metin özelliklerin ( b, u, i vs) dışında , CSS ile yazılar için kullanılan bir çok farklı özellikle daha esnek ve çeşitli yazı görünümler elde edilebiliyor...

CSS FONT ÖZELLİKLERİ

CSS ile TEXT özelliklerinin dışında FONT özellikleri kullanılarak sayfadaki metinlerin  boyutu, tipi  gibi bir çok özelliği değiştirilebiliyor. 

FONT-SIZE

Yazıların boyutunu ayarlar. Px, rem, em, yüzde gibi css birimleri kullanılır..

CSS

h3 { font-size:1.5rem;}
p {font-size:20px}

HTML

<h3> 1.5rem boyutunda başlık yazısı </h3>
<p> 20px boyutunda paragraf yazısı </p>

EKRAN

FONT-FAMILY

Yazı tipini belirler. Tek bir yazı tipi , yaılabileceği gibi birden fazla yazı tipide beliritlebilir. Bu durumda önce ilk yazılan yazı tipi etkin yazı tipi olacaktır. ANcak bu yazı tipi , sayfada tanımlı değilse yada işletim sistemlerinin varsayılan yazı tiplerinden (times new roman , arila vs) biri değilde, bu kez bir son yazılan yazı tipi etkin olacaktır. Yazı tipleri birden fazla kelimeden oluşuyorsa tırnak işaretleri arasında yazılır..

CSS

p.calibri{ font-family:calibri;}
p.verdana {font-family:verdana ,"Tİmes new roman";} 

HTML

<p class="calibri">CALIBRI yazı tipinde yazı..</p>
<p class="verdana">VERDANA yazı tipinde yazı..</p> 

EKRAN

FONT-WEIGHT

Yazıların kalınlığını ayarlar. Aşağıdaki değerleri alabilir..

• normal : kalınlaştırılmamış yazı,
• bold : kalın yazı,
• bolder : daha kalın yazı,
• lighter : daha ince yazı..
• 100-900 arası sayısal kalınlık miktar değeri.. 

CSS

p.light { font-weight:lighter;}
p.bold400 { font-weight:400;}
p.bold { font-weight:bold;}
p.bolder { font-weight:bolder;}

HTML

<p class="light">LIGHTER (kalınlığı azaltılmış) yazı..</p>
<p class="bold400">400 BİRİM kalınlaştırılmış yazı..</p>
<p class="bold">BOLD (kalın) yazı..</p>
<p class="bolder">BOLDER (daha kalın) yazı..</p>

EKRAN

FONT-STYLE

Metnin eğikliğini belirler.

• normal : Normal (stil verilmemiş) yazı,
• italic: Eğik (italik) yazı,
• oblique : Az eğik yazı.

CSS

p { font-style:italic; } 

HTML

<p> EĞİK (italik) yazı...</p>

EKRAN

FONT-VARIANT

Metinlerdeki küçük harflerin boyutları değişmeden büyük harfe dönüşmesini sağlar..

• normal : Normal (variant stil verilmemiş) yazı,
• small-caps: Büyük harfe dönüşmüş küçük boyutlu yazı

CSS

p { font-variant:italic; } 

HTML

<p> Büyük harfe dönüşmüş küçük yazı.. </p>

EKRAN

Paragraf içindeki küçük harfler i boyutları değişmeden büyük harfelere dönüşürler.. HTML'de büyük yazılan ilk harfin diğer harflere göre daha büyük olduğuna dikkat edin..

FONT KISA KULLANIM

Font özelliklerini sadece FONT değeri ile aşağıdaki sırada tek satırda yazabilriiz.. Değerler aasında boşluk bırakılır..

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

Örneğin aşağıdaki font özelliklerini tek satırda FONT ile yazalım...

font-weight: bold;

font-family: calibri;

font-size: 12px;

line-height: 15px; 

font: normal bold 12px/15px calibri;

Görüşmek üzere..