Font Özellikleri

1 Ağustos 2006

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

Avatar Popout Efekti

Avatar Popout Efekti uygulaması Devamını oku

Kapsayıcı sorguları (container query)

29 January 2024 tarihinde yayınlandı.

Renk geçişli ve Hareketli kenar çizgileri

22 January 2024 tarihinde yayınlandı.