Font Biçimi

CSS DERSLERİ

Ders3: 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. CSS'de ise bu işi font-family özelliği ile yaparız:

Font Büyüklüğü

HTML derslerinde fontların büyüklüğünü belirlemek için <font> kodunu ve size="..." parametresini kullanıyorduk. CSS'de 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:

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:

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:

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.

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.