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. I have acquired some new things from your site about pc’s. Another thing I have always thought is that computers have become something that each house must have for a lot of reasons. They provide convenient ways to organize the home, pay bills, search for information, study, tune in to music and even watch television shows. An innovative approach to complete most of these tasks has been a…

  2. It certainly is nearly unthinkable to find well-educated men or women on this issue, however , you appear like you understand what you’re preaching about! Gratitude

  3. I would like to express some appreciation to the writer just for rescuing me from this particular trouble. Right after exploring throughout the the web and finding proposals that were not powerful, I thought my life was over. Living without the solutions to the problems you have resolved by means of your main short article is a serious case, as well as ones that would have in a negative way damaged my career if I hadn’t come across your blog post. Your personal capability and kindness in maneuvering almost everything was useful. I’m not sure what I would’ve done if I had not come across such a step like this. I can at this time look ahead to my future. Thanks very much for this skilled and effective help. I won’t hesitate to endorse the sites to anyone who needs support about this issue.

  4. An interesting discussion is worth comment. I think that you should write more on this topic, it might not be a taboo subject but generally people are not enough to speak on such topics. To the next. Cheers

  5. Rattling nice style and great subject material , very little else we need : D.

Bir Cevap Yazın

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

 Characters available