Bursa Bilgisayar

Fontlar

Fontlarla Oynamak

Fontların birçok kullanım alanı vardır. Bizim işimiz web tasarımda ve yapacağımız wordpress temalarda kullanmak olduğu için bunun üzerine eğileceğiz. Fontlar CSS yapılandırılmasında önemli yer alır. Örnek vermek gerekirse şu anda gezindiğiniz sayfadaki yazıların hemen hepsinin bir font yapısı vardır. Bu yüzden yazıların okunaklı ve tasarıma uygun düşmesi için ayrıca bazı özerk yerdeki yazılarımızın diğer yerlerden farklı olduğunu belli etmek için font yapılarını kullanırız. Bu konumuzda elimizden geldiği kadar sizlere font yapısı hakkında geniş bilgiler sunmaya çalışacağız.

Font yapılarının sayısı bir hayli fazladır, fakat ne yazık ki, tamamını dilediğimiz gibi kullanamıyoruz. Bunun nedeni CSS de kullanılan font ailesinin bazılarının, bilgisayar işletim sisteminde yüklü olmayışıdır. Örneğin fontumuzun ismi a olsun bu fontumuz Windows işletim sisteminde yüklü iken Linux işletim sisteminde yüklü olmayabilir veya tam tersi de olabilir. Eğer yaptığınız tasarımda mutlaka kullanmak istediğiniz bir font varsa ve işletim sistemlerinde yüklü değilse veya emin değilseniz en pratik çözüm yolu bu fontu resim yoluyla vermektir. Bu pratikliği html de kolayca yapabiliriz fakat WordPress de durum biraz daha farklı olacaktır özellikle sürekli kullanılan alanlarda Konu başlıkları, H1, H2… gibi etiketlerde resim çözümü yetersiz kalacaktır. Bu sorunlardan kurtulabilmek için en temel kabul edilen bazı fontları font-family CSS komutumuzda belirteceğiz.
Örneklere geçmeden kısaca en temel kullanılan yapı olan serif ve sans-serif fontlarından bahsedeceğiz. Serif fontlar şekil olarak yazıların uçlarında tırnak vardır ve kolay okunulduğu söylenmektedir bu sebeple daha çok gazete, roman gibi metinlerde tercih edilmiştir. Sans-serif ise harflerin uç kısımları biraz daha keskindir daha modern bir yapısı vardır daha çok bilgisayar, tasarım, reklamcılık gibi çağdaş alanlarda son dönemlerde kullanım alanı artmıştır.
Aşağıdaki resimden farklarına bakabilirsiniz.

serif, sans-serif

Serif ve sans-serif en yaygın kullanılan aşağıdaki font yapılarıyla kullanılır.
Serif fontlar
serif fontlar
Sans-serif Fontlar
sans-serif fontlar
Serif ve sans-serif yanısıra başka bir font yapısı olan monospace vardır. Monospace font yapısındaki tüm karekterlerin uzunluğu aynıdır çok sık kullanılmamakla beraber dipnot olarak düşelim.

Font Ailesi (font-family)


Örneğin sitemizdeki h1 için font ailesi belirleyeceksek style.css dosyamızı açarak dilediğimiz font ailesini aşağıdaki örnekteki gibi belirleyebiliriz.

h1 {
font-family : verdana, sans-serif;
}
h2 {
font-family: Times New Roman, serif;
}

Önceden bahsettiğim üzere bazı fontlar algılanmayabilir bu yüzden bir font ailesine birden fazla font atayabiliriz. İlk olan font kabul edilir eğer ilk font yoksa diğerine bakılır bu şekilde yüklü font bulunana kadar devam eder.
Örnek

#menu {
font-family: Verdana, Arial, Helvetica, sans-serif;
}

Bu örneğimizde tarayıcı ilk olarak Verdana fontuna bakar bulamazsa Arial fontuna bakar ve bu sırada gider.

Font Stil (font-style)

3 çeşit ile ele alırız.
Normal : yazı normal gösterilir
İtalic : yazı eğik şekilde gösterilir
Oblique : italik yazıya benzer, fakat daha az desteklenir.
Örnek

#siteslogani {
font-family: Tahoma, Verdana, Helvetica, sans-serif;
font-style:normal;
}

Font Boyutu (font-size)

Font boyutunda genel tercih edilen 3 yöntem vardır. Bunlardan ilki px cisinden belirtmektir.

.p {
font-size:16px;
}

Em ile font boyutunu belirlemek.
Bazı ie sorunlarından kaynaklı geliştirilen boyutlandırma birimi em dir. Son dönemlerde kullanımı yaygınlaşmıştır. Px ile karşılaştırılacak olursa 1em=16px dir.

.p{
font-size:1em;
}

% ile font boyutunu belirlemek.
Ekran çözünürlüğü problemini ortadan kaldırmak için geliştirilmiştir. Örneğin bazı bilgisayar çözünürlüğü 800px iken bazılarının çözünürlüğü 1024px bu yüzden px ile boyutlandırma yaparsak ya ekrana sığmayacaktır yada ekrana göre çok küçük kalacaktır. Bu tip problemleri % ile boyutlandırma yaparak çözmüş oluruz.

body {
font-size:%100;
}

Font rengini belirlemek (color)

Bunun için color komutu kullanılır.

body {font-family:  Tahoma, Verdana, Helvetica, sans-serif;  font-size:1em; font-style:normal; color:#333;}

şeklinde kullanılabilir.

Font Ağırlığı belirlemek (font-weight)

Font ağırlığı için genel kullanılan komutlar bold, normal komutlarıdır.

 h2 {font-weight:bold;}

Fontların Kullanılan işletim sistemlerindeki yaygınlığı için bu websitesinin ziyaret edebilirsiniz http://www.codestyle.org/css/font-family/sampler-CombinedResults.shtml

Related posts

32 thoughts on “Fontlar

  1. Excellent post. I will be dealing with some of these issues as well..

  2. Oh my goodness! Incredible article dude! Thanks, However I am experiencing difficulties with your RSS. I don’t know the reason why I cannot subscribe to it. Is there anybody having the same RSS issues? Anyone that knows the answer will you kindly respond? Thanks!!

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

 Characters available