Css – 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

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.

font-family

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

font-size

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.

1. td { font-size :12px;}
2. td { font-size : 150%; }
3. td { font-size : xx-small; }
4. td { font-size : x-large; }

font-weight

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

font-style

Fontun eğik(italiktik) olup olamamasını belirler.

1. p {
2. font-style: italic;
3. }
4. h4{
5. font-style: oblique;
6. }

font-variant

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

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.

1. h2 {
2. font: bold italic 200%/1.2 Verdana, Helvetica, Arial, sans-serif;
3. }