Font Biçimi
Bir önceki sayfada metin özelliklerini CSS ile tanımlamayı görmüştük. Şimdiki dersimizde ise yazı fontlarının özellikleri ile oynayacağız.Font Türü
Önce font seçmeyi öğrenelim. HTML derslerinde <font> kodu ve face="..." parametresi ile yazı fontunu belirliyorduk. CSSde ise bu işi font-family özelliği ile yaparız:
| Kod Alanı: | |
|
Font Büyüklüğü
HTML derslerinde fontların büyüklüğünü belirlemek için <font> kodunu ve size="..." parametresini kullanıyorduk. CSSde ise font-size özelliğine değerler veririz. Verilen değer yüzde oranı (%şeklinde olabilir veya pt (point ) birimi cinsinden olabilir. Bunların yanı sıra xx-large, x-large, large, medium, small, x-small, xx-small gibi gömlek ölçülerini de kullanabiliyoruz. Veya smaller (yürürlükteki değerden bir küçük ), larger (yürürlükteki değerden bir büyük ) gibi değerler de kullanabiliyoruz:
| Kod Alanı: | |
|
Font Eğikliği
Fontların dik stilde mi, yoksa yana eğik stilde mi görüntüleneceğini font-style özelliğine değerler vererek belirleriz. Eğer fontların normal (dik stilde ) olmasını istiyorsak normal değerini, eğik olmasını istiyorsak italic veya oblique değerini veririz:
| Kod Alanı: | |
|
Büyük Harf, Küçük Harf
Eğer fontların tamamının büyük harflerle yazılmasını istiyorsak (BÜYÜK HARF; boyutça büyük değil ) font-variant: small-caps özellik ve değerini kullanırız. Eğer bunu istemiyorsak normal değerini veririz:
| Kod Alanı: | |
|
Font Kalınlığı
Eğer fontlarımızın kalın (bold ) olmasını istiyorsak, font-weight özelliğinden yararlanırız. Bunun için font-weight özelliğine normal, bold (kalın ), bolder (yürürlükteki kalınlıktan bir değer daha kalın ), lighter (yürürlükteki kalınlıktan bir değer ince ) gibi standart değerler verebiliriz. Veya 100, 200,...,800,900 gibi sayısal değerler de verebiliriz. 400 sayısal değeri, normal font değerini verir. 700 sayısal değeri ise kalın (bold ) font değerini verecektir.
| Kod Alanı: | |
|
Font Özelliklerini Tek Kodla Tanımlama
Font formatı sayfamızda öğreneceğimiz son özellik: font. Bu özellik fontların tüm özelliklerini aynı anda belirtmeye yarıyor. font özelliği üç standart tip değer alıyor:
font: (font-style değeri ) (font-weight değeri )
font: (font-style değeri ) (font-variant değeri ) (font-weight değeri ) (font-size değeri ) (font-family değeri )
font: (font-style değeri ) (font-variant değeri ) (font-weight değeri ) (font-size değeri )/(line-height değeri ) (font-family değeri )
Not: line-height özelliğini metin formatı sayfasında görmüştük.
| Kod Alanı: | |
|
Font formatı sayfamız da bu kadar. Bu sayfada özelliklerin CSS formatında nasıl yer alacağını gösterdim ama örnek çözmedim. Çünkü HTMLde işlediğimiz konuyla paralel gidildiği için, okuyucuların yazılanları kolaylıkla anladığını düşünüyorum. Tabi sizlerin birkaç örnek çözmenizde fayda var. Benim verdiğim yazım şekillerinde h1-h6, p gibi kodları kullandım ama siz yapacağınız örneklerde çeşitli kodların özellikleri üzerinde oynayabilirsiniz. Bundan sonraki sayfada arkaplan formatı üzerinde duracağız.