Cufon-Nedir_emresupcinİyi Akşamlar Sevgili Okurlar,

Bu akşamın son makalesi olarak JQuery konusunu seçtim. Sizlere yazacağım bu makalemde Cufon nedir ve kullanımı nasıldır onu anlatacağım.

 

Her zaman yaptığımız gibi öncelikle yabancılık duyduğumuz kelimeleri açıklayalım. Bu tabire uygun olarak sitemizde yabancı sözcük olarak Cufon yer almakta.

 

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ı

1 -) 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.

 

2 -) Kullanmak istediğiniz yazı tipini Windows/Fonts klasörü dışında bir klasöre kopyalayın. (Örneğin masaüstüne kopyalabilirsiniz)

 

3 -) http://cufon.shoqolate.com/generate/ adresine gidin.

 

4 -) Seçtiğiniz fontu, Regular typeface yazan yere, cufon font dönüştürücüye yükleyin.

 

5 -) The EULAs of these fonts allow Web Embedding (without Adobe Flash) yazan yeri seçili yapın.

 

6 -) Aşağıdan Punctuation yazan yeride seçili hale getirin. Bu işlem ile fontunuza noktalama işaretlerini eklemiş olacaksınız.

 

7 -) .. 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.

 

8 -) 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.

 

9 -) 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.

 

<div><script type=”text/javascript” src=”/js/cufon-yui.js”></script></div>
             <div><script type=”text/javascript” src=”/js/font.js”></script></div>
                       <div><script type=”text/javascript”></div>
                                       <div>        Cufon.replace(‘h2’, {</div>
                                                  <div>                textShadow: ‘#999999 0.4px 0.4px'</div>
                                                 <div>            });</div>
                                       <div>        Cufon.replace(‘ #rssoku h2,h3,h1,h4,legend’);</div>
                               <div>                Cufon.replace(‘ #headline’);</div>
                   <div> </div>
                                         <div>        Cufon.replace(‘#comments h3’, {</div>
                                <div>                textShadow: ‘#fff 0.7px 0.7px'</div>
               <div>            });</div>
<div></script></div>

 

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.

 

Hazır Cufon konusuna değinmişken Cufonda Türkçe Karakter Sorunu Çözümünü de anlatayı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.

Yazar
Yazar
Bilgisayar Programcısı, Web Tasarımcı, Üniversite Öğrencisi...
Twitter Facebook Google Linkedin Flickr YouTube

Önceki Yazı:Mac OS X Leopard’ın Belli Başlı Özellikleri Nelerdir?

Sonraki Yazı:Etkileyici Web Sitesinin Nasıl Hazırlanacağını Biliyor musunuz?

YORUMLAR
SİZ DE CEVAP YAZABİLİRSİNİZ
Bu yazı hakkında görüşünüzü belirtin.

ES Web Tasarım Web Tasarım Blog Teması Emre Supçin Bu tema ES Web Tasarım tarafından düzenlenmiştir. Hiçbir şekilde kopyalanamaz.