Cufon nedir? Nasıl kullanılır? Türkçe karakter sorunu çözümü?
Cufon, web sayfalarında istediğimiz fontları kullanmamıza imkan sağlayan sIFR’a alternatif son günlerde sıkça karşılaştığımız bir teknik. Bu sayede hoşumuza giden fontları ufak bir işlem ile web sayfalarımızda gösterebiliyoruz. Cufon’un sIFR’dan en önemli farkı metinleri bir flash dosyası gibi göstermeyip resim şeklinde göstermesi. Flashı bir türlü sevememiş biri olarak
Cufon Kullanımı
- Cufón’un temelini oluşturan Javascript dosyasını (cufon-yui.js) http://cufon.shoqolate.com/js/cufon-yui.js adresinden indirip uygulamanızın dizinine yükleyin.
- Kullanmak istediğiniz yazı tipini Windows/Fonts klasörü dışında bir klasöre kopyalayın. (Örneğin masaüstüne kopyalabilirsiniz)
- http://cufon.shoqolate.com/generate/ adresine gidin.
- Seçtiğiniz fontu, Regular typeface yazan yere, cufon font dönüştürücüye yükleyin.
- The EULAs of these fonts allow Web Embedding (without Adobe Flash) yazan yeri seçili yapın.
- Aşağıdan Punctuation yazan yeride seçili hale getirin. Bu işlem ile fontunuza noktalama işaretlerini eklemiş olacaksınız.
- .. and also these single characters yazan yere Türkçe karakterleri (IıİıÇçÖöĞğŞşÜü harflerini) girin. Böylece fontumuz Türkçe karakteri desteklemiyor olsa bile, bu karaterleri girdikten sonra artık Türkçe destekli hale gelecek.
- Security bölümünde, Limit usage to the following domain(s) bölümüne web sitenizin tam adresini yazarsanız, sitenizden kullandığınız fontu indirenler, başka yerde fontu kullanamazlar. Bu kısım isteğinize bağlıdır. Bu bölümü doldurarak lisanslı fontunuzun başka sitelerde kullanılmasını engellemek amacıyla kullabilirsiniz.
- I acknowledge and accept these terms yazan yeride seçili hale getirip LET’S DO THIS! butonuna tıklıyoruz.. Fontunuz bir javascripts dosyasını dönüştürülecek ve size indirmeniz için verecek. Örneğin fontunuz verdana ise, verdana.js olucak.
Font dönüştürme işimiz tamamlandı.Şimdi sıra web sitemize eklenecek kodlara geldi. Sayfamızın <head> </head> tag’leri arasına aşağıdaki kodu ekliyoruz.
<script type="text/javascript" src="/js/cufon-yui.js"></script>
<script type="text/javascript" src="/js/font.js"></script>
<script type="text/javascript">
Cufon.replace('h2', {
textShadow: '#999999 0.4px 0.4px'
});
Cufon.replace(' #rssoku h2,h3,h1,h4,legend');
Cufon.replace(' #headline');
Cufon.replace('#comments h3', {
textShadow: '#fff 0.7px 0.7px'
});
</script>
Yukarıda gördüğünüz gibi öncelikle Cufón’un javascript dosyası cufon-yui.js ekledik. Sonrasında ise fontumuzun javascript dosyasını. Altında ise hangi başlıkların ve metinleri cufon ile görüntülenmesini istediğimizi belirttik.
Cufonda Türkçe Karakter sorunu çözümü
Cufón kullanımı kısmında Font dönüştürme işleminde 7. sırada belirttiğim gibi .. and also these single characters yazan yere Türkçe karakterleri (IıİıÇçÖöĞğŞşÜü harflerini) girmemiz gerekiyor. Bu sayede oluşturulacak javascript dosyasına Tükçe karakterleri görüntülemek için kod eklenmesini sağlayacağız.
Son olarak web sitemizin veya blogumuzun dil kodlaması UTF-8 olmalı ve dosyalarımız UTF-8 karakter seti ile biçimlendirilmiş olmasına dikkat etmeliyiz. Yoksa Türkçe karakterle görünmez.
Merhaba,
Sitedeki tüm fontları cufon olarak kullansak bir sıkıntı çıkar mı sizce? İstemci yavaşlar mı?
Çok teşekkur ederim ancak bir konu ya açıklık getirilmemis,
Acaba bu js fontlari nereye yukleyecegiz yine font dosyasina mi ?..
denedim ama duzelmedi, baska nasil bir yol olabilir… utf dosyam da 8 oradada sorun yok ama fontlari nereye atacagim, birde isimlerini de degisik verdi..
Verdana_400-Verdana_700-Verdana_italic_400-Verdana_italic_700.font
Tahoma_400-Tahoma_700-Verdana_700.font
Oluşturulan dosya adı Verdana_italic_700.font.js ise head head tagları arasındaki
/js/font.js bölümünü
/js/Verdana_italic_700.font.js
şeklinde değiştirerek font dosyasını js klasörünün altına kopyalıyoruz.
Türkçe karakter içermeyen başka font dosyamız varsa o satırı kaldırıyoruz. Böylece türkçe karakter sorununu çözmüş oluyoruz.
Yaptığınız açıklama için ayrıca teşekkür ederim.
sorunu cozdum belki baska arkadaslarima da yardimim dokunur diye yaziyorum
bu bolumu silince turkce karekterler cikti…..
3 gundur ugrasiyordum, nihayet buldum,
selamlar berlinden
silinen bolum cikmamis
eger sayfanizda
script type bolumunde
js/colaboratelight_400.font.js
varsa
bu bolumu bulup siliyoruz ve guzel turkcemize kavusuyoruz…. dilerim bu kez script bolumu cikar……. :)))
Bilgilendirici bir paylaşım teşekkürler.
Abuk sabuk bilgiler yerine herkes şu yazı gibi faydalı makaleler paylaşsa ne hoş olurdu. Gerçekten teşekkürler.
Üstat ellerine sağlık, nasıl güzel bir iş yapmışsın sağol. Gerçekten çok işime yarayacak.
Çok teşekkür ederim. Sayenizde bu sorunu çözmüş oldum 🙂
Teşekkürler gayet açıklayıcı olmuş.
Teşekkürler bir çok bilmeyen arkadaş için öğretici bir metin olmu.Internet Explorer daki bulanık gelmesinin sebebi nedir sizce? Çözümü varmıdır?
çok teşekkürler günlerdir arıyordum. sayenizde sorunu çözdüm.
Günlerdir bu sorunu arıyordum…Gerçekten teşekkürler sıra ile açıklamalı gitmişsiniz.
ya süpersin 🙂
Sonunda aradığımız bilgiyi bulduk.Boşu boşuna TR karakter sorunları yaşamışız.Paylaşımınız için teşekkürler.
Tesekkurler, sadece font squirrel generator yontemini biliyordum bu iyi bir alternatif oldu. Yalniz alternatif yonyemleri de anlan bir yazi yazsaniz cok ilgi cekebilir. İyi calismalar.
paylaşım için teşekkürler, çok yararlı oldu gerçekten.
Bende HTML-Css tarzı bir sitede js kodlar kullanılmıştı. Bu işte profesyonel değilim ancak çok araştırdım türkçe karakter çözümünü. En son
Yukarıdaki satırlardan alttaki şu iki satırı tamamen sildim karakter sorunu çözüldü
sanırım en kolayı bu fontları tek tek elle düzenlerim nasılsa…
Üstad benim htm sitemde sorun var yardımcı olur musunuz?
Gerçekten çok işime yaradı. Çok teşekkür ederim.
Allah razı olsun, sayenizde sitemize cufon uygulamasını kullanabildik. Web site bölümüne ekledim isteyen ve merak edenler görebilir.
Son olarak yeni bir cufon sitesi daha çıkmış, direkt tr cufon olarak indiriliyor.
http://www.cufonfonts.com/tr