CSS Dersleri Bölüm 5 – Font(Yazı Biçemi) Stillendirme

CSS Dersleri Bölüm 5 – Font(Yazı Biçemi) Stillendirme

CSS font özelliği font ailesini, kalınlığını, boyunu ve yazı stilini tanımlamanızı sağlar.

Şerif ve Sans-şerif fontların arasındaki farklar;

Şerif fontu tırnaklı olur kırmızı alanlarda görüldüğü gibi. Sans-şerif ise tırnaksız olandır. Sans-şerif daha çok başlıklarda ve başlık niteliği taşıyan ciddi karakterli yazılarda kullanılır. Tırnaklı olan şerif ise, paragraf özelliği gösteren ve açıklama niteliğindeki yazılarda kullanılır, küçük fontlarda kullanımı yaygındır.

CSS Font Ailesi

CSS’te 2 tür font ailesi adı vardır;

• generic family – Şerif veya tek aralıklı bir grup font ailesi
• font family – Belirli bir font ailesi Times New Roman veya Arial gibi…

Font Family

Font ailesi bir yazıdır/yazı tipidir,  font-family özelliği ile ayarlanan.

Font-family özelliği birkaç font adını da tutmalı ki sistem kayıplarına karşı korunsun. Yani yazdığınız font kullanıcının sisteminde yoksa yedekteki font seçeneğini kullanmalı. Veya sizin yazdığınızı tarayıcı desteklemeyebilir ikinci yazdığınızı.

İstediğiniz font ile başlayın,  generic ailesi ile bitirin ve böylece tarayıcının, benzer font seçmesini sağlayın generic family’ye benzer olarak tabi eğer diğer fontlar uygun değilse.

Not: Font ailesindeki isim bir kelimeden fazla ise tırnak işaretleri arasında yer almalı, tıpkı “Times New Roman”‘da olduğu gibi.

Örnek;

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

Deneme adresiniz için tıklayınız!

Font Style

Çoğunlukla yazıyı yatık yani italik yapmak için kullanılır.

Üç değere sahiptir:

• normal – Yazı normal gözükür
• italik – Yazı yatık gözükür
• oblique – Yazı hafif yatık gözükür

Örnek;

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

Denemek için adresiniz…

Font size

font-size özelliği yazının boyutunu ayarlamamıza yardımcı olur.

Web tasarımında yazı boyutunu ayarlamak en önemli şeydir. Bundan dolayı, başlıkları paragraflar gibi, paragrafları başlıklar gibi ayarlamamalısınız.

Daima düzenli HTML etiketleri kullanmalısınız, <h1>-<h6> başlkılar için <p> paragraflar için gibi…

Font-size değeri kesin(absolute) ya da göreceli(relative) değer olabilir.

Absolute size(kesin boyut);

• Yazının belirli bir boyu sahip olması
• Tüm tarayıcılarda kullanıcının yazı boyunu değiştirmesine izin vermez bu da erişim sebepleri için kötüdür
• Çıktının fiziksel boyutu bilindiğinde yararlıdır.

Relative size (göreceli boyut);

• Çevresindeki elementlere göre göreceli bir boya sahip olur
• Tarayıcılarda yazı boyunun değiştirilmesini sağlar kullanıcılarca

Eğer belirlemezseniz temel tarayıcı boyutu 16px=1em’dir. Px değil de em olarak kullanmanız Internet Explorer’a uygunluk açısından daha iyidir.

Piksellerle Font boyutu

Pikseller ile yazı boyunu ayarlamak size tam kontrol sağlar:

h1 {font-size:40px;}
 h2 {font-size:30px;}
 p {font-size:14px;}

Deneme adresiniz için tıklayınız!

Yukarıdaki örnek Firefox, Chrome ve Safari tarafından tekrar boyutlandırılabilir olacaktır fakat Internet Explorer hariç olacaktır bu durumdan.

Em ile Font Boyutu

Yukarıda da bahsettiğim gibi Internet explorer’daki sorunun çözümü için geliştiriciler em kullanırlar px yerine.

Em ölçü birimi w3c tarafından önerilmektedir.

1em Varsayılan font büyüklüğüne eşittir. Bu da tarayıcılarda 16px’dir. Yani 1em=16px’dir. Formülünüz de px/=16em’dir. Örnek;

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 */

Deneme adresiniz için tıklayınız!

Yukarıdaki örnekte, daha önceki örnekte yer alan piksellerin aynısıdır fakat em ile yazılmıştır. Ve tüm tarayıcılar ile uyumludur.

Malesef IE için hala bir problem mevcut. Yazıyı yeniden boyutlandırırken büyültüldüğünde olması gerekenden büyük, küçültürken de olması gerekenden küçük olmakta.

İkisinin karışımı, yüzdelik ve em!

Çözüm, tüm tarayıcılarda çalışabilmesi için, varsayılan bir boyut atamak yüzdelik olarak body elementine. Örnek;

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

Denemek için adresiniz!

Artık kodlarımız düzgün çalışmakta! Her tarayıcıda aynı boyda hem yakınlaştırırken hem uzaklaştırırken. Bu arada bu uzaklaştırma ve yakınlaştırma Windows’ta CTRL tuşuna basılı tutarken +’ya veya -‘ye basarak ve yahut farenizin scroll(teker)’ini ileri geri hareket ettirerek, Mac’te ise CTRL yerine komut tuşuna basarsınız.

Birkaç uygulama…

fontun kalınlığı
Bir fontun kalınlığının nasıl ayarlanacağının uygulaması.

Fontun genişlik ya da yayılımı
Fontun genişlik ya da yayılımının ayarlanmasına dair uygulama
Bir bildirim ile tüm font özellikleri
Bir bildirim ile kısa yazım sayesinde font özelliğinin kullanımı ve tüm değerlerin verildiği uygulama

Tüm CSS Font Özellikleri