CSS Font Özelliği

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

 

Bunları da beğenebilirsin