Web’deki en büyük sorunlardan biri font sınırlaması ve bu yüzden de web safe fontlar arasına sıkışıp kalmak. Tasarımda çok güzel duran bir font kullanıcının bilgisayarında yüklü olmadığı için ya web safe fontlardan birini kullanmak durumundayız ya da css image replacement metodu ile bu sorunun üstesinden gelebiliyoruz. Image replacement her ne kadar çok güzel bir teknik olsa da statik siteler için geçerli. Dinamik yapıya sahip sitelerde pek avantajlı bir teknik değil. Yazının değişeceği her zaman görseli de değiştirmemiz gerekir. Son yıllarda bu sorun için değişik çözümler geliştirildi ve kullanılmaya başlandı. Bunlardan en popüler 4 tanesini kısaca inceleyeceğiz.
Sifr:
Çıktığı 2005 yılından itibaren sürekli gelişmekte olan olan Sifr bugün 3.versiyonu ile karşımızda. Javascript, flash ve css ile istediğimiz fontukullanabiliyoruz. Metinler seçilebilir ve bulanık gözükmüyor. Tarayıcı desteği var. Fontlar swf nin içine gömülü olarak geldiği için lisans sorunu yok. Bu avantajların yanında flash kullanması ve kullanıcının bilgisayarında flash plugin yüklü olmasını gerektirmesi en büyük eksisi. Kullanım olarak da diğer yöntemlere göre daha zor.
“http://www.mikeindustries.com/blog/files/sifr/2.0/sIFR-2.0.7.zip” adresinden dosyalarımızı indiriyoruz.
Sifr dosyasını indirdiğinizde flash klasörü içinde bulunan sifr.fla dosyasını açıyoruz. Yazımızı yazdıktan sonra export ediyoruz.
Dökümanımızın head kısmına gerekli css ve js kodlarını yazıyoruz.
<link rel="stylesheet" href="style/sIFR-screen.css" type="text/css" media="screen" /> <link rel="stylesheet" href="style/sIFR-print.css" type="text/css" media="print" /> <script type="text/javascript" src="js/sifr.js"></script> <script type="text/javascript" src="js/sifr-config.js"></script>
Yapmamız gereken bir iki ayar daha var. Bunlardan ilki js dosyasında. js klasörü içerisindeki sifr-config.js dosyasını açıyoruz. Bu dosyanın içine aşağıdaki kodları yazıyoruz. Burada hazırladığımız ve export ettiğimiz flash dosyasını ve hangi elemanlarda kullanmak istiyorsak onları tanımlıyoruz.
var allstar = {
src: 'allstar.swf'
};
sIFR.activate(allstar);
sIFR.replace(allstar, {
selector: 'p'
});
“selector” kısmına fontunu değiştirmek istediğimiz tag’i yazıyoruz.
Örneği görmek için tıklayınız
Küçük bir uyarı. Sifr local’de çalışmayacaktır. Bu nedenle sunucu üzerinde değişiklikleri görebiliyoruz.
Cufon:
Sifr’e alternatif olarak çıkmıştır. Flash uygulamasına gerek duyulmadan sadece javascript desteği ile istediğimiz fontu kullanabiliyoruz. İnternet explorer’ın VML(Vector Markup Language) diğer tarayıcılarda html5 ile gelen bir özellik olan <canvas> tag’ini kullanıyor. En büyük artısı hızı ve kullanım kolaylığı. Ayrıca yazı kalitesini belirleyebiliyoruz. Bu sayede dosya boyutu üzerinde kontrolümüz oluyor.Metinleri fare ile seçemememiz ise dezavantajı. Bu nedenle başlıklarda kullanmak en doğrusu. İçerik yazılarında kullanmanız sayfayı ağırlaştıracaktır. Lisans sorunu ise çözülmüş değil.
Cufon kullanımı oldukça basit. Öncelikle http://cufon.shoqolate.com/generate/ adresine giderek download kısmından cufon’un çalışması için gerekli javascipt kodlarını js.uzantılı kendi oluşturduğumuz bir sayfaya kopyalıyoruz. “cufon-yui.js” adı ile sayfayı kayıt ediyoruz.Sonra anasayfaya dönerek kullanmak istediğimiz fontu import ediyoruz. Burada küçük bir sorun var. Font klasörününden fontu yükleyemiyoruz. Fontu masaüstümüze kopyaladıktan sonra yüklemeyi yapabiliriz. Türkçe karakter kullanılacaksa(ğĞçÇöÖıİüÜşŞ) “and also these single characters” yazan yere bu karakterleri girmemiz gerekiyor. Son olarak “the EULAs of these fonts allow Web Embedding (without Adobe Flash)” ve “I acknowledge and accept these terms” kutucuklarını işaretlememiz gerekiyor. Hazırlanan js dosyasını bilgisayarımıza indirdikten sonra html sayfamızın head kısmına aşağıdaki kodları giriyoruz.
<script type="text/javascript" src="cufon-yui.js"></script>
<script type="text/javascript" src="Ravie_400.font.js"></script>
<script type="text/javascript">
Cufon.replace('p');
</script>
Cufon.replace(); kısmına hangi tag’in fontunu değiştirmek istiyorsanız onu yazıyorsunuz.
Örneği görmek için tıklayınız.
@font-face
Harika bir css özelliği olan font-face ile kullanıcının sisteminde yüklü olmayan fontları yükleyerek istediğiniz fontun görüntülenmesini sağlayabiliyoruz. Bunun için Javascript ve flash gerekmiyor. Ancak burada da tarayıcıların desteklediği ve desteklemediği font türleri karşımıza en büyük sorun olarak çıkıyor. Bu sorunu Internet Explorer ve diğer tarayıcılar olarak ayırabiliriz. İe sadece .eot uzantılı fontları destekliyor. Diğer tarayıcıların desteklediği .fft ve .otf .svg dosya türlerini ise desteklemiyor. Bu nedenle tanımlama yaparken tüm tarayıcıların destekleyeceği şekilde tanımlama yapmak durumundayız.
font-face’in kullanımı oldukça basit. klasik font tanımımızı yapmadan önce kullanmak istediğimiz fontu kullanıcının makinasına yüklememiz gerekiyor. sonrasında ise hangi özel
@font-face {
font-family: Allstar;
src: url(Allstar.ttf);
}
p { font-family: Allstar, serif; }
Ancak işin içine tarayıcı farkları girince tanımımızı değişitirmemiz gerekiyor. .eot uzantılı tanım Internet Explorer için. local ile belirttiğimiz tanım ise eğer font kullanıcının bilgisayarında yüklü ise tekrar yüklenmemesi için. sonrasında da siğer tarayıcılar için fontumuzu tanımlıyoruz.
@font-face {
font-family: 'Allstar';
src: url('Allstar.eot');
src: local('Allstar'),
url('Allstar.woff') format('woff'),
url('Allstar.svg#Allstar') format('svg'),
url('Allstar.TTF') format('truetype');
}
p { font-family: Allstar; }
Örneği görmek için tıklayınız.
Her tarayıcıda fontumuzun gözükmesi için değişik formatlar kullandık. Elinizdeki fontun formatını değiştirmek için www.fontsquirrel.com/fontface/generator sitesinden faydalanabilirsiniz.
Yazar Hakkında: UI Developer 
#0