CSS ile Font Biçimi
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:
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:
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.
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.
Ö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.
CSS Dersleri
- CSS Nedir ?
- CSS Giriş
- CSS de Metin Biçimi
- CSS ile Font Biçimi
- CSS ile Arkaplan Biçimi
- CSS de Sınır Çizgisi
- CSS ile Dış Kenar Boşluğu
- CSS de İç Kenar Boşluğu
- CSS de Listeleme
- CSS ile Konumlandırma
- CSS de Fare İmleci
- CSS Çeşitleri nelerdir
- CSS İle Scrollbar'a Yeni Görünüm
- CSS İle Link Kontrolü
- CSS’in Yapısı
- CSS Özellik Seçicileri
- CSS Pseudo-Sınıfları
- CSS Birimleri
- CSS’de Kısaltmalar
- CSS Background Özellikleri
- CSS Örnek Kod