Font Özellikleri | Fatih Hayrioğlu'nun Not Defteri

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

Yapısı : color: (değer) 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.][renk]

Tarayıcı Uyumu ** Firefox Chrome Safari Opera İnternet Explorer **Mobil Tarayıcılar iOS Safari Opera Mobile Android Browser

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 > | <soysal aile ismi > Başlangıç değeri:web tarayıcısı belirler Uygulanabilen elementler: tüm elementler Kalıtsallık: Var

soysal yazıtipi aile isimleri

• serif (örn: Times)
• sans-serif (örn: Arial or Helvetica)
• cursive (örn: Zapf-Chancery)
• fantasy (örn: Western)
• monospace (örn: Courier)

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; }

Tarayıcı Uyumu ** Firefox Chrome Safari Opera İnternet Explorer **Mobil Tarayıcılar iOS Safari Opera Mobile Android Browser

font-size

Yapısı :font-size: <kesin değerler > | <göreceli değerler > | | \\ **Aldığı Değerler :** - <kesin değerler \> | <göreceli değerler \>\\ **Başlangıç değeri:**medium\\ **Uygulanabilen elementler:** tüm elementler\\ **Kalıtsallık:** Var

kesirli değerler

• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large

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; }

Tarayıcı Uyumu ** Firefox Chrome Safari Opera İnternet Explorer **Mobil Tarayıcılar iOS Safari Opera Mobile Android Browser

font-weight

Yapısı :font-weight: <değer > 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; }

Tarayıcı Uyumu ** Firefox Chrome Safari Opera İnternet Explorer **Mobil Tarayıcılar iOS Safari Opera Mobile Android Browser

font-style

Yapısı :font-style: <değer > 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; }

Tarayıcı Uyumu ** Firefox Chrome Safari Opera İnternet Explorer **Mobil Tarayıcılar iOS Safari Opera Mobile Android Browser

font-variant

Yapısı :font-variant: <değer > 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; }

Tarayıcı Uyumu ** Firefox Chrome Safari Opera İnternet Explorer **Mobil Tarayıcılar iOS Safari Opera Mobile Android Browser

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.

Yapısı :font: <değer > 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; }

Tarayıcı Uyumu ** Firefox Chrome Safari Opera İnternet Explorer **Mobil Tarayıcılar iOS Safari Opera Mobile Android Browser