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+
[...] Yazı Tipi özellikleri [...]
hocam dersler için teşekkürler bide bi sorunum var. yazıların üstünü çizme rengini nasıl ayarlarız. mesela sizin sitede yazı üstünü çizerken kırmızı oluyo. onun gibi
http://www.fatihhayrioglu.com/css-ile-secilen-metinlerin-rengini-degistirmek/
Kalıtsallık var derken ne kastediliyor? Önceki yazılarınızı okurken atladım sanırım veya yoktu. Benim anladığım kadarıyla en üstteki elemente yani ebeveyne atadığımız değerler çocuklarda ve hatta torunlardada aynı biçimde uygulanıyor sanırım. Doğru anlamıışmıyım?
http://www.fatihhayrioglu.com/cssde-kalitsallikin…
doğru anlamışsın
teşekkürler..
Font-weight:bold; özelligini kullanınca int explorerde az kalın diğerlerinde daha kalın gösteriyor acaba bunu nasıl çözebilirim
Verdiğiniz bilgiler için teşşekkürler…
iyi çalışmalara fatih bey..
bir sorum olacak bir ağ tasarımı yapıyorum kulanıcılar profil sayfası oluşturucak vb şeyler yapacağı bir ağ.. ben bu ağ’ın normal font’unu yani genel yazılarının boyutunu 11px olarak ayarladım hem bana göre iyi hemde daha düzenli duruyor sitem.. fakat 11px diğer kullanıcılar için çok mu küçük yoksa normal mi işin içinden çıkamadım açıkcası.. kullandığım çözünürlük 1280×1024.. ideal font boyutum sizce normalmi yoksa 12mi yapmalıyım.. şuan hiç bir sorun teşkil etmiyor fakat benim memnuniyetim değil kullanıcı memnuniyeti daha önemli.. yardımınız için teşekkürler..
Yeni nesil tarayıcılardaki zoom özelliği nedeni ile yazı tipi boyutu ayarlamak daha kolay.
Ama illa bir seçip yapacaksam, bence 11px 1280×1024 çözünürlük için daha uygun
Fatih bey; cevap alamayınca yeterli olarak açık yazamadığıma karar verdim.
Menüdeki aktif olan linki mesela sizin sitedeki aktif olan link “sayfa” font-ozellikleri.htm diyelim bu sayfa burada açık, bu sayfaya verilen linkte
Font Özellikleriolsun. Aktif olan linkte font rengi ve kalınlığının değişmesini istiyorum bunu isteme sebebim ise 80′a yakın link var sayfamda.Sizin sitedeki kaynağa baktım ve css yi inceledim bir türlü bulamadım. Siz burada kullanmışsınız “kategori olarak”- Lifestream
Bunun için mevcut sayfanın olduğu linke farklı bir sınıf atayarak yapıyoruz. İster istemci ister sunucu taralı bir programla sonra bu sınıfa css de farklı özellikler tanımlıyoruz
menüdeki aktif olan linki “şuan açık olan bu sayfanın linki gibi” css ile font rengini kırmızı ve kalın yapabilirmiyiz.
css menü kodum aşağıda
#icerikmenu {
list-style-type: none;
padding-left: 0;
margin-left: 0;
}
#icerikmenu {
list-style-type: none;
padding-left: 0;
margin-left: 0;
}
#icerikmenu a { display: block;
color: #0000FF;
text-decoration: none; }
#icerikmenu a:hover{
background-color:#ccff66;
}
Bence bunu için sunucu veya istemci taraflı bir programla sayfa seçili ise sınıf atayıp bu sınıfa tanımlamanı yapmalısın