CSS Font
CSS Font özellikleri metinlerin yazı-tipi, kalınlık, boyut, boşluk gibi niteliklerinden sorumlu olan CSS özelliğidir.Sitelerin yazısal içeriklerine tasarım-stil tanımlaması CSS font özelliği ile sağlanır.
Font-Family
Metinlerin yazı-tipini(font) ayarlamak için CSS font-family özelliği kullanılır.
Normalde her işletim sisteminde yüklü olan belirli sayıda font vardır.Bizim özel olarak belirttiğimiz font veya fontlar sistemde bulunmuyorsa, o zaman web tarayıcıları varsayılan olarak mevcut bir fontu devreye sokacaktır.Bunun nasıl olduğunu bir örnek üzerinde gösterilim.
Örnek Kullanım:
p {
font-family: 'Open Sans',arial,sans-serif;
}
Örnekte font-family özelliğine birden fazla font değeri tanımladık.Eğer bilgisayarınıza Open Sans fontu yüklü değilse tarayıcı Arial yazı tipini kullanacaktır.Eğer arial fontuda sistemimizde yoksa o zaman sans-serif grubuna ait mevcut olan bir fontu kullanacaktır.
Burada dikkatinizi çekecek olan nokta, font-family özelliğine değer atarken font ismi/leri ve jenerik ismi tanımlıyor olmamızdır.
Jenerik isimleri, serif,sans-serif,monospace gibi benzer tiplere sahip font aile grubunu ifade eder.Örneğimizde sans-serif grubuna ait fontlar kullandığımızdan jenerik isimi de bu olmuştur.
Font ismi ise o gruba ait fontun özel ismidir.Burada Open Sans ve Arial fontu kullanılmıştır.
Note : Eğer font ismi iki ve daha fazla kelime içerisiyorsa tırnak işareti içerisine alınır.
Çok bilinen Times New Roman,Georgia gibi fontlarda serif grubuna ait fontlardır.
Note : Sans-serif grubuna ait fontlar bilgisayar ekranlarında serif fontlarına göre daha okunaklıdır.
Font-Size
Metinlerin yazı boyutunu ayarlamak için CSS font-size özelliği kullanılır.Font boyutlarını bir sayı değeri ve ardından onu tanımlayan CSS uzunluk birimleri ile oluşturuyoruz.
Örnek Kullanımı:
body {
font-size: 16px;
}
h1 {
font-size: 2em;
}
Örnekte body elementimize 16px değeri verdik, daha sonra başlık etiketimize (h1) 2em değeri verdik.Eğer uzunluk birimleri konusuna baktınız ise başlığımızın boyutunun 32px değerine eşit olduğunu anlamışsınızdır.
Font-Style
CSS font-style özelliği çoğunlukla metinleri eğik yazmak için kullanılır.Aldığı değerler italic, normal, oblique
Örnek Kullanımı:
span {
font-style: italic;
/*span elementine ait metinler eğik yazılır*/
}
Font-Variant
Metine özel bir biçim vermek için CSS font-variant özelliği kullanılır.Bu özelliği ait small-caps değeri vardır.Bu değer metindeki büyük harflere müdahale etmiyor, küçük harfleri normal büyük harflerden biraz daha kısa bir şekilde büyük harfe çeviriyor.Bugüne kadar hiç kullanmadım o yüzden açıklaması da oldukça zormuş.
Örnek Kullanımı:
p {
font-variant: small-caps;
}
Font-Weight
Font kalınlığını ayarlamak için CSS font-weight özelliği kullanılır.Özellik 100 ile 900 arasında bir sayı değeri ya da normal,bold,bolder,lighter gibi tanımlı değerlerden birini alabilir.
Örnek Kullanım:
h2 {
font-weight: bold;
}
h3 {
font-weight: 400;
}
Not: 100 ile 900 arasındaki sayılar hep yüz yüz artırılmış sayılardır.100 değeri en ince 400 değeri normal değer, 700 değeri varsayılan kalın değeri, 900 en kalın değeri ifade eder.
Font – Kısaltılmış Özellik
CSS de kısaltılmış özellikler bir çok yerde (margin, padding, border) kullanılıyor.Yukarıda tanımladığımız font özelliklerini de tek bir font özelliği ile gerçekleştirebiliriz.
Örnek Kullanım:
/*
Söz dizimi şu şekildedir:
font : <font-style> <font-variant> <font-weight> <font-size> <font-family>
*/
p {
font: italic small-caps bold 16px 'Open Sans',sans-serif;
}
Note : font kısaltılmış özelliğin değerleri tanımlanırken font-size ve font-family özelliklerini tanımlamak zorunludur.Diğer 3 özellik isteğe bağlı olarak tanımlanabilir.
Son olarak:
CSS font özelliği içerik ağırlıklı siteler için olmazsa olmaz stil çalışmalarından biridir.Öğrenmesi ve kullanımı kolay özelliklerdendir.
Bütün CSS Dersleri için tıklayın