CSS Font İşlemleri – Font Biçimlendirme


FONT-FAMİLY

Yazının font ailesini belirtir. Bu özellikle bir font ailesi oluşturacağımız gibi birden çok font ailesinide bir başlıkta toplayabiliriz. Her tarayıcı bütün fontları desteklemediğinden birden fazla fontları grup içerisinde barındırın.

h1 {font-family: arial, verdana, sans-serif;}

h2{font-family: “Times New Roman”, serif;}

Basit bir örnek:

<html>
<style>
h1 {font-family: arial, verdana, sans-serif;}

h2{font-family: “Times New Roman”, serif;}
</style>
<body>
<h1> Arial font tipi </h1>
<h2> Times New Roman </h2>
</body>

 

FONT-STYLE

Bu özellik sayesinde yazının italik olup olmama niteliğini bildiririz.

Bu özellik 3 farklı değer alır:

  • normal – Metin normal görünür
  • italic – Metin italik yani eğik yazı olarak görünür
  • oblique – Metin yatık görünür (oblique italic ile benzerdir fakat daha az desteklenir)

<html>

<style>
p.normal {font-style:normal}
p.italic {font-style:italic}
</style>
<body>
<p class="normal">bu paragraf normal görünür</p>
<p class="italic">Bu paragraf italik görünür</p>
</body>
</html>

Bu paragraf, normal.

Bu paragraf, italic.

Bu paragraf, oblique.

FONT-WEIGHT 

Bu özellik ile fontun kalınlığı ile oynayabiliriz.

p.normal {font-weight:normal;} // Kalınlık değeri belirlenmemiştir.
2 p.thick {font-weight:bold;} // Yazdığımız yazılar kalın olarak görünecektir.
3 p.thicker {font-weight:900;} // Kalınlık değeri üzerinde oynamalar yapabileceğimiz kullanım şekli.
FONT-SİZE 
Yazı boyutunu ayarlamak için uygularız.
p {font-size:12px}
Ayrıca aşağıdaki bilgiler ilginizi çekebilir.

Font Büyüklüğünü Em Olarak Vermek

Internet Explorerdaki boyutlandırma problemlerini aşmak için çoğu geliştirici font boyutu olarak piksel yerine em kullanır.

Em biriminin kullanımı W3C tarafından tavsiye edilir.

1em boyutu varsayılan font boyutudur ve 16px’e eşittir.

pikselden em ye dönüşüm piksel/16=em formülü ile hesaplanabilir.

h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.5625em;} /* 25px/16=1.5625em */
p {font-size:0.75em;} /* 12px/16=0.75em */

Yukarıdaki örnekde ki font boyutları bir önceki örnek ile aynıdır fakat tüm tarayıcılarda sorunsuz çalışacak olan em birimi kullanılmıştır.


Yüzde ve em birimlerinin beraber kullanılması

Aşağıdaki örnek çözüm tüm tarayıcılarda sorunsuz çalışır.

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

body seçicisinde font boyutunu 100% ayarlıyoruz böylece ilk olarak sitenin varsayılan font boyutunu ayarlamış oluyoruz. daha sonra diğer seçicilerde em kullanarak bu sabit bir font boyutu ayarlamış oluyoruz.

Artık CSS kodumuz sorunsuz olarak tüm tarayıcılarda çalışacaktır. Tüm tarayıcılarda aynı boyutlarda metinlerimiz olacaktır. Zoom ve yeniden boyutlandırma işlemleri bu sayede tüm tarayıcılar tarafından desteklenecektir.


Örnek:

Bu paragraf için font-size:250% verilmiştir.

Bu paragraf için font-size:150% verilmiştir.

Bu paragraf için font-size:100% verilmiştir.

Bu paragraf için font-size:18px verilmiştir.

Bu paragraf için font-size:1em verilmiştir.

Bu paragraf için font-size:xx-large verilmiştir.

Bu paragraf için font-size:x-small verilmiştir.

Bu paragraf için font-size:xx-small verilmiştir.


font-size özelliğinin aldığı değerler ve açıklamaları

Değer Açıklama
xx-small font boyutunu xx-small(ektra ektra küçük) olarak ayarlar.
x-small font boyutunu ekstra küçük olarak ayarlar.
small font boyutunu küçük olarak ayarlar.
medium font boyutunu ekstra medyum olarak ayarlar. Bu değer varsayılandır.
large font boyutunu büyük olarak ayarlar.
x-large font boyutunu ektra büyük olarak ayarlar.
xx-large font boyutunu xx-large (ektra ektra büyük) olarak ayarlar.
smaller font boyutunu parent elementin metin boyutundan daha küçük olarak ayarlar.
larger font boyutunu parent elementin metin boyutundan daha büyük olarak ayarlar.
length font boyutunu px,cm gibi sabit bir boyutta ayarlar.
% font boyutunu parent elementin boyutunun yüzdesi olarak ayarlar.
inherit font boyutunu parent elementin boyutunun ile aynı olacak şekilde ayarlar.

 

 

 

Author: Ali Göksel Bektaş

Simenty kurucu ortağı. Küçüklüğünden beri website yapan Ali bulunduğu web sektöründe 10 yıldan fazla tecrübesı vardır. Bisiklet sürmeyi, kek yemeyi ve rahat koltukları sever.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.