Font Özellikleri
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.
p{
color:#f00; /* kırmızı renk kodu */
}
Renk kullanımına daha önce değinmiştik. Detay için tıklayınız.
Internet Explorer+
Firefox+
Chrome+
Safari+
Opera+
W3C’s CSS Level 1+
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:
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
}
Eğer font ismi bir den fazla kelimeden olşuyorsa çift tırnak içine alınır.Örn:
h1 {
font-family: Georgia, "Times New Roman", serif;
}
Internet Explorer+
Firefox+
Chrome+
Safari+
Opera+
W3C’s CSS Level 1+
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.
td {
font-size :12px;
}
td {
font-size : 150%;
}
td {
font-size : xx-small;
}
td {
font-size : x-large;
}
Internet Explorer+
Firefox+
Chrome+
Safari+
Opera+
W3C’s CSS Level 1+
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: Var
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.
p{
font-weight: bolder;
}
Internet Explorer+
Firefox+
Chrome+
Safari+
Opera+
W3C’s CSS Level 1+
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.
p {
font-style: italic;
}
h4{
font-style: oblique;
}
Internet Explorer+
Firefox+
Chrome+
Safari+
Opera+
W3C’s CSS Level 1+
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.
span {
font-variant: small-caps;
}
Internet Explorer+
Firefox+
Chrome+
Safari+
Opera+
W3C’s CSS Level 1+
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
h2 {
font: bold italic 200%/1.2 Verdana, Helvetica, Arial, sans-serif;
}
Internet Explorer+
Firefox+
Chrome+
Safari+
Opera+
W3C’s CSS Level 1+
Ben FF’in son sürümünü kullanıyorum, herhangi bir ayarını değiştirmedim. FF’teki font karakteri yapısı IE’deki gibi çıkmıyor. Bu, browserın ClearType özelliğiyle alakalı sanırım. Çünkü FF’te karakter yapısı IE’ye göre çok cılız kalıyor. O yüzden çok komplike bir font family kullanmadım, ama karakter yapısının bozulmaması için illa standart bir font size mı kullanmam lazım? FF’te cılız karakter yapısından kurtulmak için font weighti ayarladım. Bu seferde karakterlerin kalınlığı IE’de çok abartılı oldu. Bu işin bir standardı yok mu?
-ACİL-
Fatih bey, selamlar..
Sayfamın font özellikleri Firefoxta çok kalitesiz gözüküyor. Kalın olmasını istediğim font IEde normal çıkarken, Firefoxta ince çıkıyor. Bende font weight ayarlarını değiştiriyorum, bu seferde fontun kalitesi bozuluyor. Bu sorunu nasıl aşabilirim?
Font un kalitesini bozması ilginç. Firefox ayarlarını değiştirmiş olabilirsiniz.
GERÇEKTENDE GÜZEL OLMUŞ. BULAMADIĞIMIZ BİRÇOK BİLGİSİ SİTENİZDE KOLOYIKLA BULABİLİYORUM TESEKKÜRLER
Hocam ben h2 ekleyince üstünde boşluk oluşuyor nasıl hallederiM?
tğm blok level elementlerde satır boşluğu olur. Engellemek için margin ve paading değerlerini istediğin değere getirmelisin.
abi ben h1 tagını css ile düzenledim. Fakat h1 yazısının altında boşluk kalıyor. Onu nasıl halledeceğim?
@Erçin
bu değerler göreceli değerlerdir. Mutlak değerler gibi kesin bir ayrım söz konusu değildir.
larger: en büyük yazı tipi boyutunu
smaller: en küçük yazı tipi belirler
bu kodların firefox ve ie de farklı görünmemesi lazım başka etikliyen özellikler olmasın
amator olarak web tasarımıyla ilgileniyorum şu şekilde bir sorunla karşılaşıyorum;
mesela :
t1 {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 16px;
font-style: normal;
color: #CC6600;
}
şeklinde yazılmış olan css kodu firefox ta problem teşkil etmez iken explorer da sorun çıkartıyor,
ancak;
şeklindeki tanımlamalarda her ikisinde de problem olmuyor bunun sebebi nedir?
sadece gibi öğeler mi kullanmalıyız…
teşekkür ederim.
larger | smaller
Font-size:larger;
Font-size:smaller;
Bu iki boyut verme kısmını anlayamadım Aşşağıdakilerden Farkı nedir? tam olarak
Siz göreceli demişsiniz ben ona taktım ilerliyemiyorum. :D
<code>
Font-size:large;
Font-size:small;
</code>
Göreceli'den kasıt, dahil olduğu etiketlerin boyutuyla doğru orantılı olarak metinin büyüklüğü/küçüklüğü değişkendir.
Mutlak büyüklüklerde dahil olduğu etiketin boyutuyla metin büyüklüğünün bir alakası yoktur, bildirim ne ise, ekranda gözüken odur…