Tekrar merhaba arkadaşlar.. CSS En baştan aldığımız derslerimizden Yazı Tiplerini stillendirme özelliğini göstereceğim.

[dropcap]C[/dropcap]SS Dersleri 3.başlığımızda CSS yazı tiplerini kullanmayı göstereceğim.. Text Font özelliği CSS de font-family koduyla gerçekleşir. Font sistemi “fallback” sistemiyle çalışır. Eğer tarayıcınız bildirdiğiniz font stilini desteklemiyorsa default font fonksiyonunu ekrana çıkarır.. Örnek olarak;

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

Yukarıda p etiketlerinin yazı tiplerini belirttik.

Fon Stilleri

Font stilerri özelliği eğer anonim bir değer atamadıysanız 3 ayrı şekilde gösterilebilir.

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

Yukarıda normal, italic ve italic’in bir üst versiyonu gibi düşünebileceğimiz oblique özellikleri mevcut.

Font Büyüklüğü

Bu da hepimizin bildiği gibi yazılarımızın büyüklüğünü özelleştiren font size metodunun CSS kullanımından ibarettir.Bazı HTML tagları otomatik olarak default ayarlarda saklı yazı büyüklüklerine sahiptir. <h1> ve <h6>aralığı, <p> etiketi bunlara örnek gösterilebilir. Fakat bu biçimleri CSS’de yukarıdaki örneklerde olduğu gibi kendimize göre özelleştirebiliriz.. Herhangi bir sorun çıkmayacaktır.

Yazıları Pixellerle Boyutlandırma

Bu özellikte yukarıda bahsettiğim yazı büyüklüklerini px değeri olarak büyültme ya da küçültme işlemidir.Örnek;

h1 {font-size:40px;}<br /> h2 {font-size:30px;}<br /> p {font-size:14px;}

Yukarıdaki yazım şekli İnternet Explorer’in dışındaki çoğu tarayıcıda çalışmaktadır.

Em sistemi ile Yazı Boyutlandırma

Em sistemini burada açıklamamın sebeni W3 standartlarında web kodlaması yapmak istiyorsanız , kullanmanız gereken yazı büyüklüğünü ayarlama stili olduğu içindir.. Örnek olarak;

h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */

Yukarıda görüldüğü gibi, ilk önce  2.em değerinin karşılığı yan tarafta verilmiştir. Bu em özelliği ilerde profesyonel yazı tipleri oluştururken kullanacağımız ana elemanlardan biri olacağı için ilerde daha ayrıntılı bir şekilde özelliklerinden bahsedeceğim..

Em sistemi ile Kombinasyon

Em sisteminde ilerde kullanacağımız anonim stil özelliklerini yüzdeleme ya da em kombinasyonu olarak adlandırılan dönüşüm ile kuracağız.. Sadece bir örnek verip ilerde daha ayrıntılı değineceğim konulara arasına saklıyorum;

body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}

Aşağıda birkaç tane daha değişik örnek göstererek Yazı fontları stillendirme konusunu bitirmek istiyorum;

p.normal {font-weight:normal;}
p.light {font-weight:lighter;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
p.normal {font-variant:normal;}
p.small {font-variant:small-caps;}
p.ex1{font:15px arial,sans-serif;}
p.ex2{font:italic bold 12px/30px Georgia,serif;}

Yukarıdaki ayarları kullanarakta kendimize özel stilleri oluşturabiliriz. Tabiki bunların hepsini açıklarsam işin içinden çıkamayız ama siz deneme yöntemiyle nasıl kullandıklarını görebilirsiniz..Aşağıda bütün CSS Font Size özelliklerini tablo haline getirdik

CSS sütunu CSS1 ve CSS2 de ki kullanım alanlarına göre listelenmiştir.

Güneşli günler dilerim.