Hiç şüphesiz sIFR birkaç sene önce yayınlandığında ben dahil birçok web tasarımcısı çok heyecanlanmış, web’de bir dönümün eşiğine gelindiğini söylemiştik. Öyle ki, web sitelerinde farklı fontları kullanmak kısmen mümkün olmuştu. Bunun üzerine makaleler yazmış, iyi ve kötü yönlerini konuşmuştuk. Sonra CSS3 her yazı tipini desteklemeye başlayınca, web’e dilediğiniz fontu kullanma özgürlüğü önce Safari 3 sonra da Firefox 3 ile gelmişti.

sIFR her ne kadar basit kullanımlı, iyi bir çözüm olsa da düzenleme için Flash programına ihtiyaç duyulması ve .swf formatını kullanması iki büyük dezavantaj. Bu yazıda da, size FLIR’i, yani webde Flash olmadan istediğiniz fontu nasıl kullanacağınızı göstermek istiyorum. Siz metninizi yazıyorsunuz, FLIR onu istediğiniz stilde bir grafiğe dönüştürüyor.

Örnek için tıklayınız.

1) Flir’in son versiyonunu indirin

Bu adres üzerinden Flir’in son versiyonunu indirin ve dosyaları sunucunuza aktarın. Zip dosyasındaki klasörü (örn. facelift-1.2b3-3) öncesinde ‘facelift’ olarak yeniden adlandırmanız kurulumda kolaylık sağlayacaktır. Unutmamanız gereken bir diğer şey ise Flir’in sorunsuz çalışmak için PHP5′e ihtiyaç duyması, eğer hala PHP4 versiyonunu kullanmaktaysanız ve başlıklarınız bir türlü görünmüyorsa kontrol paneliniz üzerinden PHP versiyonunuzu yükseltiniz.

2) Dosyaları çağırın

Sunucunuza ‘facelift’ isimli klasörü de attığımıza göre, artık gerekli JS dosyalarını web sayfamızdan çağırabiliriz. Örnek olarak index.html sayfamızı açıp bölümüne aşağıdaki kodu ekleyin:

1

<script src="facelift/flir.js" type="text/javascript"></script>

Eğer JS dosyalarınız ayrı bir klasördeyse, ve flir.js dosyasını da o klasöre atıp oradan çağırmak isterseniz, dosyayı açıp 30. satırdan tam adresi belirlemeniz gerekmekte. Diyelim ki flir.js dosyasını ‘js’ isimli bir klasöre attıysanız, dosyanın 30. satırı aşağıdaki gibi görünmelidir:

1

,path: 'facelift/'

Ve gelelim index.html sayfamızdaki son işleme. Flir’in çalışma komutunu alabilmesi ve normal başlıkları resimlere dönüştürmesi için aşağıdaki kodu </body>’nin hemen önüne koymanız gerekmektedir.

1
2
3
4

<script type="text/javascript"> 
    FLIR.init(); 
    FLIR.auto(); 
</script>

3) Fontlarınızı seçin ve çağırın

Bitti bile, Flir’i sitemize neredeyse entegre ettik. Öncelikle fontlarınızı ‘facelift -> fonts’ klasörüne atın. Sonrasında yapmamız gereken ‘facelift’ klasörü içerisinde bulunan ‘config-flir.php’ dosyasını açıp 39. satırdan itibaren fontlarımızı eklemek/düzenlemek.

37
38
39
40
41
42
43
44

// Each font you want to use should have an entry in the fonts array. 
$fonts = array(); 
$fonts['css-font-ismi']   = 'font.ttf'; 
$fonts['css-font-ismi-2']       = 'font2.ttf'; 
$fonts['css-font-ismi-3']  = 'font3.ttf';   
 
// The font will default to the following (put your most common font here). 
$fonts['default']       = $fonts['css-font-ismi'];

‘conflig-flir.php’ dosyasında 37. satırdan itibaren başlayan bölümde yazı tiplerinizi yukarıdaki şekilde ekleyebilir, varolan yazı tiplerini düzenleyebilirsiniz. Dilediğiniz kadar font ekleyebilir, çağırabilirsiniz. Yukarıda ‘css-font-ismi’ olarak geçen bölümde tanımlayacağınız isim CSS dosyanızdan çağıracağınız font ismi olacaktır.

4) CSS ile başlıklarınızı şekillendirin

Ve son adımımızda işlemin başında eklemiş olduğumuz ‘flir.auto()’ komutunu (bkz. Adım 2) düzenleyecek, Flir’i dilediğimiz başlık ve CSS sınıflarına atayacağız.

1

FLIR.auto([ 'h1', 'h2', 'h2.kirmizi', 'strong' ]);

Yukarıdaki komut ile tüm h1, h2 başlıkları ile ‘kirmizi’ sınıflı h2 başlıklarına ve aynı zamanda tüm kalın yazılara (strong) FLIR atanacaktır. Bu adımdan sonra yapmanız gereken son şey, CSS’den yukarıda belirtmiş olduğunuz başlıklara istediğiniz fontu ve rengi atamak. FLIR gerisini sizin için halledecek, başlıklarınız resim olarak görüntülenecektir.

1
2
3

h1 { font-family: css-font-ismi, Arial, serif; }  
h2 { font-family: css-font-ismi-2, Arial, sans-serif; }  
h2.kirmizi { font-family: css-font-ismi-3, Arial, sans-serif; color: red; }

Örnek dosya için tıklayınız.

FLIR’ın artı yönleri

• Kurulumu SIFR’e göre çok daha basit.
• Kurulum için herhangi bir yardımcı program gerektirmiyor (örn. Adobe Flash)
• Flash Player gerektirmediği için her tarayıcıda sorunsuzca görüntülenebiliyor.
• Flash Player gerektirmediğinden dolayı daha stabil bir çözüm sunuyor

FLIR’ın eksi yönleri

• Fontları Photoshop’un ’sharp’ tekniğiyle yorumladığından daha ayrıntılı yazı tiplerinde sorun çıkarabiliyor. sIFR’e göre daha kalitesiz bir görüntü sunuyor.
• Henüz Türkçe karakter desteği sorununu çözemedim. Ancak gelişticiyle iletişime geçtim, kısa süre sonra bir çözüm bulacaktır diye umuyorum.
• FLIR henüz beta versiyonunda olduğundan büyük projelerde kullanmak için biraz daha beklemek gerekiyor.

FLIR, tüm tarayıcılar CSS3 ile birlikte gelen ‘evrimsel’ her yazı tipini destekleme özelliğini sunana kadar sIFR için iyi bir alternatif olacağa benziyor. Bundan sonra bazı projelerimde kullanmayı düşündüğüm bu güzel skripti XHTMLMutfağı olarak sIFR’in yanında desteklemeye başlayacağız.

Etiketler: flir, font, kullanım kılavuzu, sIFR