CSS: Font Özellikleri

Bu dersimizde CSS’de tüm font özelliklerini ele alacağız.. Fontlar için bir çok tanmlı özellik bulunmakta, bu dersimizde göreceğimiz özellikler şunlardır;

font-family
font-size
font-style
font-variant
font-weight
font
@font-face

Bu dersimizde CSS’de tüm font özelliklerini ele alacağız.. Fontlar için bir çok tanmlı özellik bulunmakta, hepsine sırasıyla bir göz atalım..

1) font-family

Nesnenin yazı tipini belirlemek için kullanılır.
Değer olarak yazı tipi isimleri belirlenir.. (Örn: Arial, Tahoma, comic sans ms gibi..)
Özel fontlar bu şekilde isim belirlenerek doğrudan kullanılmaz.. Onun için ayrı bir font özelliği olan @font-face kullanılır. Bunu dersimizin sonunda sizlerle birlikte inceleyeceğiz.

/*
 * h1 nesnesini seç ve
 * yazı tipini Arial yap
 */
h1 {
    font-family: Arial
}

– Birden Fazla Yazı Tipi Tanımlamak

Eğer birden fazla yazı tipi tanımlamak isterseniz virgül ile ayırarak yazı tipi isimlerini yazmanız yeterlidir.

/*
 * h1 nesnesini seç ve
 * yazı tiplerini ata
 */
h1 {
    font-family: Verdana, Arial, 'Comic Sans Ms'
}

Peki böyle bir durumda hangi yazı tipi geçerli olacaktır? Böyle bir durumda önce ilk yazı tipine bakılır.. Eğer Verdana fontu var ise yazı tipi Verdana olarak belirlenir.. Ancak Verdana fontu yok ise bir sonraki font’a bakılır.. Eğer Arial fontu var ise yazı tipi Arial olarak belirlenir.. Bu şekilde bir sıralaması vardır..

Not: Eğer font ismi birden fazla kelimeden oluşuyorsa tırnak içinde de yazılabilir..

2) font-size

Yazı boyutunu belirlemek için kullanılır..
Standart olarak kullanabileceğimiz değerler şunlardır;

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


Ayrıca px, pt, em, % gibi değerlerde kullanabiliriz.. Örnek vermek gerekirse;

/*
 * paragraf nesnesini seç ve
 * yazı boyutunu 21px olarak ayarla
 */
p {
    font-size: 21px
}

3) font-style

Her ne kadar font-style genel bir özellik ismi gibi görünsede sadece yazının eğik olup olmadığı belirlenir 🙂
Aldığı standart değerler şunlardır;

normal
italic
oblique


Bir örnek vermek gerekirse;

/*
 * paragraf nesnesini seç ve
 * yazıyı eğik yap
 */
p {
    font-style: oblique
}

/*
 * em nesnesini seç ve
 * eğik yazıyı normala dönüştür
 */
em {
    font-style: normal
}

4) font-variant

Yazıları büyük harfe çevirir. Ancak ı ve i harflerini büyük I olarak çevirdiği için pek hoşunuza gitmeyebilir.. 2 değer alır ancak sadece small-caps değeri kullanılır.

/*
 * paragraf nesnesini seç ve
 * küçük harfleri büyük yap
 */
p {
    font-variant: small-caps
}

5) font-weight

Yazı tipinin kalınlık ve incelik ayarlarını yapar..
Aldığı standart değerler şunlardır;

normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900


Örnek vermek gerekirse;

/*
 * paragraf nesnesini içindeki spanı seç
 * ve yazısını kalınlaştır
 */
p span {
    font-weight: bold
}

/*
 * strong nesnesini seç ve
 * kalın olan yazıyı incelt.
 */
strong {
    font-weight: normal
}

6) font

Tüm font özelliklerinin tek seferde kullanılmasını sağlar.. Sırasıyla şöyle kullanılmalıdır;
font-style -> font-variant -> font-weight -> font-size / line-height -> font-family
Bu özelliğin kullanılması için her zaman font-size ve font-family özelliklerinin olması gerekir.

/*
 * paragraf nesnesini seç ve
 * eğik yap - harfleri büyüt - kalın yap
 * boyutunu 20px yap - satır yüksekliğini 25px yap
 * yazı tipini Arial yap
 */
p {
    font: oblique small-caps bold 20px/25px Arial
}

7) @font-face

Özel yazı tiplerini belirlemek için kullanılır. Normal şartlarda modern tarayıcılar ttf uzantılı font dosyasını kabul ediyorlar, ancak internet explorer sorun çıkardığı için onun kabul ettiği eot uzantılı halinide dahil etmemiz gerekir..

Temel anlamda @font-face için gerekli örneğimiz şöyledir;

@font-face {
    font-family: 'erbilenFont';
    src: url(http://www.erbilen.net/demo/font_face/font.ttf)
}

Şimdi internet explorer sorunu için ttf uzantılı dosyamızı eot’a çevirmemiz gerekli.. Bunun için şu aracı kullanabiliriz;
http://convertfonts.com/ttf-to-eot.php

Evet, eot uzantılı font dosyamızıda dahil ettiğimizde kodlarımız şöyle olacak;

@font-face {
    font-family: 'erbilenFont';
    src: url(http://www.erbilen.net/demo/font_face/font.eot);
    src: url(http://www.erbilen.net/demo/font_face/font.ttf)
}

Şimdi birde local tanımı var.. Bunun anlamı ise şu, sitenizi ziyaret eden kullanıcıda yükleteceğiniz font var ise yükletmeden direk kullanmasını sağlamak..

@font-face {
    font-family: 'erbilenFont';
    src: url(http://www.erbilen.net/demo/font_face/font.eot);
    src: local('Font İsmi'),
         url(http://www.erbilen.net/demo/font_face/font.woff) format('woff'),
         url(http://www.erbilen.net/demo/font_face/font.svg#fontid) format('svg')
}

Evet, son olarak diğer formatlarıda yukarıdaki gibi dahil edebilirsiniz.. Ben sadece ie, firefox ve chrome’da desteklerini kontrol ettim.. Destekleri ise şu şekilde;

svg => chrome, safari
eot => internet explorer
woff => firefox, chrome, safari

Tabi bu destekler tarayıcıların sürümlerine göre değişebilir, bir başka makalede okuduğumda otf tüm tarayıcılarda desteklenir diyordu ancak ben chrome ve firefox’da sadece otf ile fontu görüntüleyemedim.

Videoda Yaptığımız @font-face Örneğini İndirmek İçin;
http://www.erbilen.net/demo/font_face/font_face.rar

Evet bu CSS dersimizin sonuna geldik, bir sonraki derste görüşmek üzere!

Yayınlayan

Tayfun Erbilen

2009'dan beri web işleriyle uğraşan, aynı zamanda amatör müziklede ilgilenen sıradan birisi..

“CSS: Font Özellikleri” üzerine 12 yorum

  1. güzel bi' video olmuş ellerine sağlık

    ek olarak; yazıda @font-face'de url: şeklinde olanları videoda url() şeklinde düzelttin. bunu yazıda da güncellersen iyi olur. 🙂

  2. font-face in kaldırılmasının sebeplerinden birisinin premium fontların herkes tarafından indirilip kullanabildiği için kaldırıldığını okumuştum bir yerde. Eline sağlık Tayfun çok güzel işler yapıyorsun

  3. @erhan aydın, evet dediğin doğru olabilir.. Özellikle adobe'un çoğu fontu font-face generator araçları ile çevrilmiyor lisanstan dolayı.. Tabi bunun önüne başka araçlar kullanarak geçilebilir ama yinede mantıklı yani bu düşünce 🙂

  4. waaww yeni konu gelmiş..:) bu arada are you cola? çok ii olmuş 🙂 ciddi ciddi paypal'a yönlendiriyo falan 🙂

  5. Merhaba videolarını zevkle takip ediyorum. Gayet yararlı oluyor. Derslerin devamı gelecek mi acaba?

  6. @Hakan Oral, teşekkür ederim. Evet derslerin zaman içerisinde yenileri eklenecek.

  7. font-variant kısmında kullanımda i harfi I olur demişsiniz ama bunun çözümü html sayfasında html lang parametresini tr yapmaktır. Örnek Böylece küçük i büyük İ harfine kolaylıkla çevrilir.

  8. Kardeşim ağzına , eline ve yüreğine sağlık. Bulabildiğim en güzel kaynak budur. Emeğine sağlık tekrardan. Başarılarının devamını dilerim.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir