Ö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.