CSS ve TrueType Yazı TipleriWeb sayfalarının büyük bir bölümü yazı formundadır, yani multimedya bileşenler her zaman yazının gerisinde kalır. Bu nedenle sayfaların kullanıcı dostu hale getirilmesinde en optimum nokta genelde yazı bileşenleri üzerinden bulunmaya çalışılır. Farklı yazı tipleri kullanmak de kullanıcı dostu arayüzler yaratmak için en etkili yöntemlerden biridir. Fakat yazı tipleri setimiz sınırlıdır. Bu nedenle genelde, evrensel olarak her makinede var olduğuna inandığımız Arial, Times New Roman, Verdana, Tahoma gibi tipleri kullanmak zorunda kalır ve bir bakıma kendimizi kısıtlarız.

Hakon Wium Lie'ye göre sınırları kaldırma fikri ilk 1998'de gerçekleştirilmeye çalışılmış ama bir tür tarayıcı kavgasına döndüğünden kendi amacının dışına çıkıp unutulmuş. 98'e geri döndüğümüzde Netscape ve IE yazı tipi çeşitliği açısından bu tür bir destek vermeyi kafaya koymuşlar. Fakat iki tarayıcı da günümüzde en sık kullanılan TrueType formatını değil de kendi formatlarını yaratıp, sadece onları destekleyince tarayıcı bağımsızlığı aşılamadığı için kimse bu özellikleri kullanmamıştır.

Bu hikayeden sonra şimdi ne yapabileceğimize başlasak iyi olacak. Mesela Occidental adlıTrueType bir yazı tipini herkesin görebilmesi sağlamak için CSS dökümanımızın içine "import" etmemiz lazım. Bunun için öncelikle Occidental yazı tipini bir bağlantıyla ulaşabileceğimiz herhangi bir alana upload etmemiz gerekiyor. Bu işlemden sonra CSS'e göz atmaya başlayabiliriz.

CSS:
  1. @font-face {
  2. font-family: "Occidental";
  3. src: url(http://www.burcudogan.com/fonts/occident.ttf) format("truetype");
  4. }
  5.  
  6. h1 { font-family: "Occidental", Verdana;
  7. font-size:72px; color:#3399FF;
  8. }

Occident 67KB olduğundan download hızına ekstra bir külfet getirmeyecekdir, çünkü büyüklüğü küçük bir resime eşdeğerdir. Daha fazla örnek için Hakon Wium Lie'nin kendi makalesinde referans verdiği örneklere göz atabilirsiniz.

Yorum Ekleyin ↓

Required Adınız (gerekli)
Required Email (görüntülenmeyecek - gerekli)
Blog / Website? (varsa)

KISA BİR NOT: Lütfen yorumlarıza özen gösterin, tartışma yaratmak için provake edilmiş yorumları silmekten büyük bir zevk aldığımızı unutmayın. Fikrinizi bağırın ama onun arkasında durabilcek gerekçeleriniz olsun. - Bir dost...

23 Yorum ↓

Farklı bakış açılarının var olduğu bir dünyayı destekleyen bir blog olarak bize fikir hocalığı yapmaktan kaçınmamanızı ve yazmaya değer bulduklarınızın altına birşeyler eklemeyi unutmamanızı yürekten diliyoruz.
  •  Add karma Subtract karma +1
    1. Burcu @ [27/10/2007]

    Css ile yüklenen yazı tipleri ayrıca bellekte tutuluyor ama bu önemli bir dezavantaj değil çünkü font başına wn fazla 60-70kb harcıyorsunuz.

  •  Add karma Subtract karma +1
    2. Hüseyin Arkın @ [28/10/2007]

    True type fontlar acaba Windows dışında da görüntülenebiliyor mu?

  •  Add karma Subtract karma +0
    3. Burcu @ [28/10/2007]

    ^ Evet, truetype'ı ilk bulan zaten Apple'dır.

  •  Add karma Subtract karma +0
    4. Omer @ [1/11/2007]

    Gzl ve faideli bir yazı thnxxxxxx

  •  Add karma Subtract karma +0
    5. Ekin @ [2/11/2007]

    CeLik :) LoneLy Codec By Ekin Süpersin :)

  •  Add karma Subtract karma +0
    6. Murat @ [2/11/2007]

    Bu yontemde genelde IE de problem cıkarıor ozelikle 6 da hec gozukmuo bununla ılgılı ayrıntılı bir arastırma yapmıstım ve buldugum tek gecerlı yol http://www.laydo.net/makale/html/html-de-css-ile-font-embed-yapiyoruz-artik-ozgursunuz.html

  •  Add karma Subtract karma +0
    7. sinan @ [2/11/2007]

    ben ie 6 da denedim. olmuyor acaba firefox da çalışır mı? :|

  •  Add karma Subtract karma +0
    8. Mrhn @ [3/11/2007]

    Teşekkürler Bilgiler için.
    Uzun Süredir Aradığımız Fakat Farklı Sonuçlar Aldığımız bir Kod Biçimiydi.
    Şans Eseri Görmem Mucize gibi. Tekrar Teşekkürler.

  •  Add karma Subtract karma +0
    9. İsmail Aşcı @ [3/11/2007]

    Benzer olarak böyle [*] birşey var ama Win. üzerinde Firefox,IE7 ve Opera'da sorunsuz calisirken benim Linux'umda çalışmadı.
    Sanırım sorun benim XFS'in normal yollardan ttf render edememesinden kaynaklanıyor. Yani tam manasıyla platform/tarayıcı bağımsız bir çözüm gibi görünmüyor...

    [*] http://www.cameraontheroad.com/index.php?p=524

  •  Add karma Subtract karma +0
    10. İsmail Aşcı @ [3/11/2007]

    Bu arada durum nedir bilemiyorum ama söz konusu fontları bir şekilde internete açmak lisans itibariyle soruna yol açar mı acaba, fikri olan var mı?

  •  Add karma Subtract karma +0
    11. Burcu @ [3/11/2007]

    İsmail,
    Öncelikle teşekkürler Linux üzerinde deneme yapmamıştım ki TTF ile Linux dağıtımlarının araları iyi değil, bu nedenle ortaya attkları standart FreeType hatta. Bunu gözden kaçırmış olmam gerçekten ayıp olmuş :|

    Lisans konusunda ise kullanımı ve dağıtımı bedava olan fontların kullanılması lazım, sonuçta bir şekilde bedava dağıtıma açtığınız için başınızın belaya girmesi söz konusu olabilir.

    @ Sinan, bu özellik firefox 2.x'lerde var, IE 6 doğal olarak hiçbir standarta uymadığı gibi buna da uymuyor ama IE 7'de bu gözden kaçırılmamış. Opera'nın son serisi destekliyor. Safari 3.x destekliyor. Fazla test yapamadım ama Win ve Mac OS X'de doğru düzgün çalışıyor belirttiğim tarayıcılarla.

  •  Add karma Subtract karma +0
    12. İhsan Dişkan @ [4/11/2007]

    Bu yöntemi yanlış hatırlamıyorsam 1 yıl önce bir projede denemiştik, ancak o zaman tarayıcıların neredeyse %90'ı IE6 olduğu için saçma sapan bir durum ortaya çıkmıştı. Sonrasında Verdana amca ve Tahoma halayı kullanmak zorunda kalmıştık..
    Şimdilerde ise IE6 kullanımı %20-30 larda bence biraz daha beklemeli. Hele hele sosyal bir ağ iseniz, kullanıcının göz nuru olduğu ortamlarda kullanılmamalı yahut tarayıcı bazlı css yazılmalı..

  •  Add karma Subtract karma +0
    13. /dev /mach @ [4/11/2007]

    ek olarak;

    sIFR, font olayına daha iyi bir çözüm sunabilir

    http://www.mikeindustries.com/sifr
    http://wiki.novemberborn.net/sifr/How+to+use

  •  Add karma Subtract karma +0
    14. temabul @ [17/11/2007]

    belki bunu birkac temalarimda uygulayabilirim. tesekkurler Burcu

    ( istersen link degisimi yapabiliriz )

  •  Add karma Subtract karma +0
    15. alper @ [30/11/2007]

    teşekkürler.
    fakat anlamadığım bu yazı tipi ilk site yüklenirken mi yükleniyor tamamen?yani sonrasında devamlı siteden çağırılıyor..yoksa kullanılan yerlerde mi yalnızca çağırılıyor?mesela "BAŞLIK" yazdık bu başlık yazısı için gerektiği kadar kb mı çağırılıyor?
    +67 kb bence küçük bi resim için fazla büyük ayrıca.:)

  •  Add karma Subtract karma +0
    16. Burcu @ [1/12/2007]

    alper, fontlar cache'de tutuluyor ve bu sebepten her seferinde sunucundan yeniden istenmiyor. Aynı CSS dosyalarının önbellekte tutulması gibi.

  •  Add karma Subtract karma +0
    17. wolkanca @ [6/12/2007]

    Bu şey için daha erken arkdaşlar, şimdililk bence sIFR ile devame din.

  •  Add karma Subtract karma +0
    18. Emre Savaş @ [6/12/2007]

    Wolkanca'ya katılıyorum sIFR (yeni versiyonunda adı değişmiş sanırım) kullanmak şu an için daha mantıklı yaklşaık 10-20 kb bir yükleme yapıyor.

  •  Add karma Subtract karma +0
    19. alper @ [20/12/2007]

    @burcu teşekkür ederim.

  •  Add karma Subtract karma +0
    20. serkan sarp @ [25/12/2007]

    Süper bi yazı, ilk fırsatta deniycem bunu. Sifr konusuna şöyle bi bakındım, bişey anlamadım, indirmek de istemedim. Css'ye gömmek daha bi rahat olcak benim için. Burcu'ya teşekkürler olur benden de.

  •  Add karma Subtract karma +0
    21. Super MeG @ [3/01/2008]

    Güzel bi yazı.. teknik olarak da faydalı olabilir ama erişilebilirlik açısından sıkıntılı bi yöntem..

    İllede ben özel font kullanacam derseniz diğer arkadaşların bahsettiği gibi sifr güzel bişe..

    Bi de sıkıya gelince bulduğum TXT2IMG Php Scripti vardı..
    Script içine kullanmak istediğiniz font adını (Script ile aynı klasörde) font boyutunu ve rengini veriyosunuz.. çıkış olarak da png alıyosunuz...

    Örnek :
    http://www.yildirimbaski.com/includes/text2img/image.php?type=manset&text=Merhaba

    Örnek 2 :
    http://www.yildirimbaski.com/includes/text2img/image.php?type=haber&text=Merhaba%20Siyah

  •  Add karma Subtract karma +0
    22. Jackson @ [19/01/2008]

    Xp/Sp2 ve Ie 7.0 'da bu kodu kullanarak fontu görmem için windows'ta font dosyasına çift tıklayarak windowsun font görüntüleyicisinde fontu açmam gerekiyor ancak o şekilde görebildim kapatınca font yine gözükmüyor fikri olan??

  •  Add karma Subtract karma +0
    23. vicdone @ [29/01/2008]

    aklımdaki birşeydi. çok sağolun, ileride işime yarayabilir.