Font özellikleri sayfalarımızdaki metinlerin font ailesini, kalınlık ayarlarını,boyutunu, büyük-küçük harf olmasını ve stilini değiştirmemizi sağlar. CSS fontlar üzerinde tam hakimolmamızı sağlar.
- color
- font-family
- font-size
- font-weight
- font-style
- font-variant
- font
color
Aldığı Değerler :<renk> | inherit
Başlangıç değeri: web tarayıcısı belirler
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Var
color metinlerimizin rengini tanımlamamız için kullanılır.
1 |
p{ |
2 |
color:#f00; /* kırmızı renk kodu */ |
3 |
} |
Renk kullanımına daha önce değinmiştik. Detay için tıklayınız.
Internet Explorer 3+
Netscape 4+
Opera 3.6+
W3C?s CSS Level 1+
CSS Profile 1.0
font-family
Yapısı : font-family : [[<font aile ismi > | <soysal aile ismi >],]* [<font aile ismi > | <soysal aile ismi >] | inherit
Aldığı Değerler :
<font aile ismi >- herhangi bir font ailesi ismi kullanılabilir.
<soysal aile ismi >
- serif (örn: Times)
- sans-serif (örn: Arial or Helvetica)
- cursive (örn: Zapf-Chancery)
- fantasy (örn: Western)
- monospace (örn: Courier)
Başlangıç değeri: web tarayıcısı belirler
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Var
Metinlerin kullanılacağı font ailesini belirlemek için kullanılır. Birden fazla fontailesi kullanılacaksa aralarına virgül (,) konur. Genelde son font ailesiolarak soysal font ailesi yazılır. Örnek:
1 |
p { |
2 |
font-family: Verdana, Arial, Helvetica, sans-serif; |
3 |
} |
Eğer font ismi bir den fazla kelimeden olşuyorsa çift tırnak içine alınır.Örn:
1 |
h1 { |
2 |
font-family: Georgia, "Times New Roman", serif; |
3 |
} |
Internet Explorer 3+
Netscape 4+
Opera 3.6+
W3C?s CSS Level 1+
CSS Profile 1.0
font-size
Aldığı Değerler :
- <kesin değerler >
- xx-small | x-small | small | medium | large | x-large | xx-large
- <göreceli değerler >
- larger | smaller
- <uzunluk>
- <yüzde> (üst elementlere(ebveyn) bağlı olarak)
Başlangıç değeri: medium
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Var
CSS, Font boyutlandırmaya daha esnek tanımlama yapmamızı olanak sağladı. Mesela 11px değeri HTML?de2 ve 3 değeri arasında bir değer denk geliyor ve HTML font elementi ile birlikte kullanılamıyordu.CSS?de font boyutunu belirlemek için bir çok birim kullanılır. Örn: px, em,pt, in, cm vd.
01 |
td { |
02 |
font-size :12px; |
03 |
} |
04 |
td { |
05 |
font-size : 150%; |
06 |
} |
07 |
td { |
08 |
font-size : xx-small; |
09 |
} |
10 |
td { |
11 |
font-size : x-large; |
12 |
} |
Internet Explorer 3+
Netscape 4+
Opera 3.6+
W3C?s CSS Level 1+
CSS Profile 1.0
font-weight
Aldığı Değerler : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Başlangıç değeri: normal
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Yok
Fontun kalınlık incelik durumunu belirler. 100(ince)-900(kalın) arasında bir değer alabildiği gibi bold, bolder ve normal değerlerini de alır.
1 |
p{ |
2 |
font-weight: bolder; |
3 |
} |
Internet Explorer 3+
Netscape 4+
Opera 3.6+
W3C?s CSS Level 1+
CSS Profile 1.0
font-style
Aldığı Değerler : normal | italic | oblique | inherit
Başlangıç değeri: normal
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Var
Fontun eğik(italiktik) olup olamamasını belirler.
1 |
p { |
2 |
font-style: italic; |
3 |
} |
4 |
h4{ |
5 |
font-style: oblique; |
6 |
} |
Internet Explorer 3+
Netscape 4+
Opera 3.6+
W3C?s CSS Level 1+
CSS Profile 1.0
font-variant
Aldığı Değerler :normal | small-caps | inherit
Başlangıç değeri: normal
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Var
Metnin küçü-büyük harf ile gösterilmesini belirler. İki değer alır. normal | small-caps.
1 |
span { |
2 |
font-variant: small-caps; |
3 |
} |
Internet Explorer 4+
Netscape 6+
Opera 3.6+
W3C?s CSS Level 1+
CSS Profile 1.0
Türkçe karakterlerde sorun çıkardığı unutulmamalı
font
Yukardı anlatılan font özelliklerinin hatta ek olrak line-height değerinide tek sefer de tanımlamak için kullanılır. Bir kısaltmadır.
Aldığı Değerler :[ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>
Başlangıç değeri: tanımsız
Uygulanabilen elementler: tüm elementler
Kalıtsallık: Var
1 |
h2 { |
2 |
font: bold italic 200%/1.2 Verdana, Helvetica, Arial, sans-serif; |
3 |
} |
Internet Explorer 3+
Netscape 4+
Opera 3.6+
W3C?s CSS Level 1+
CSS Profile 1.0
Kaynak : Fatih HAYRİOĞLU, CSS dersleri