Bir çok web tasarımcının vazgeçemediği font dönüştürme scripti olan ‘ Cufon font replacement ‘ kimi zaman anlamsız hatalar vermektedir.Artıklarının fazlalığının yanında bazen ufak hatalar verebilmektedir ve bu durum gerçekten kimi zaman can sıkıcı olmaktadır.Bu yazımızda sizlere Cufon dönüşüm gecikmesi sorununun çözümünü anlatacağız.Öncelikle Cufon Font Replacement uygulamasının sorun yaratmasında ki en büyük etkenin tarayıcı farklılıkları olduğunu bilmekte yarar vardır.Kimi zaman tarayıcı uyumsuzluğu kimi zaman ise tarayıcı kaynaklı sorunlarla karşılaşmak mümkündür.Cufon temel olarak javascript ile çalıştığından dolayı bazı tarayıcılar tarafından farklı çözümlenmelere yol açabiliyor.Bu tarayıcılara örnek vermek gerekirse internet explorer güzel bir örnek olacaktır.
Internet explorer eski sürümünde en çok karşılaşılan sorunlardan biri olan uzun süren font dönüşüm süresini daha kısa bir süreye indirmek için aşağıda verdiğimiz koddan önce cufon dosyalarını çağırınız.Bu kod ile komutun verildiği bölüme kadar dönüştürme işlemi yapılacaktır ve Cufon.now(); komutu ile dönüştürme işlemi son bulacaktır.
| <script type=”text/javascript”> Cufon.now(); </script> |
Daha sonra ise site içerisinde çalışması beklenen javascript dosyaları işlenmeye başlar.Bu dosyalara örnek olarak google Analystics verilebilir.Bu işlem sayesinde dönüştürme komutu en başta yapılmış olur ve işlem süresince diğer scriptlerin ağırlığından kurtularak gecikmeyi maksimum oranda azaltmış olursunuz.
Bazı durumlarda Cufon.now; kodu yeterli kalmamaktadır.Sebebi ise, çok fazla javascript kullanılan sitelerde Cufon scripti tarayıcı tarafından çağırıldığında site yanıt vermekte gecikiyor.Bu durumlarda yapmamız gereken ise, küçük bir css hilesidir.Dönüşüm esnasında .cufon-loading sınıfı aktif olduğu için stil dosyasının içerisine aşağıda verdiğimiz kodu ekleyiniz.Böylece gecikmeden kaynaklanan render edilemeyen metinlerle bir daha karşılaşmamış oluyorsunuz.
| .cufon-loading {visibility: hidden;} |
Cufón Kullanımı
Cufon js uygulamasını 3 adım olarak hazırlayp bitirecez.
- Öncelikle Cufon’un temelini oluşturan Javascript dosyasını (cufon-yui.js) indiriniz ve uygulamanızı çalıştırmayı planladığınız yere yükleyin.
- Ardından kullanmak istediğiniz yazı tipini Windows/Fonts klasörü dışında bir klasöre yükleyin. Dosyanın seçilebilmesi için bu işlemin yapılması gerekiyor. Ardından şuradaki dönüştürücüye gidin ve yazı tipinizi bilgisayardan seçerek yükleyin. Dönüştürücü sayfasındaki gerekli işaretlemeleri/ayarları yaptıktan sonra işlemi başlatın. Dönüştürme işlemi bittiğinde size yazı tipinin ismini taşıyan bir Javascript dosyası verilecek (Ör. Myriad_Pro_400.font.js). Bu dosyayı da uygulama dizininize yükleyin.
- Son olarak uygulamanızın en üstünde aşağıdaki gibi bir kod ile yüklemiş olduğumuz iki Javascript dosyasını çağırın ve dönüştürülmesini istediğiniz seçiciyi belirleyerek koda yazın.
Sizin metniniz burada bulunacak.