Cufón: Font Oluşturma ve Kullanma

Bu tasa­rımda ilk baş­larda bu özel­liğe yer ver­miş­tim, fakat bu özel­liği tema­nın 1.1 ver­si­yonu ile iptal ettim. Neden der­se­niz, kul­la­na­cak güzel bir font bula­ma­dım. Ama bu özel­lik bir­çok alanda kul­la­na­bi­le­ce­ği­niz bir özel­lik. Bu yazıda da, ilk önce font oluş­tur­mayı ve daha sonra web say­fa­nızda bu fontu nasıl kul­la­na­ca­ğı­nızı anlatacağım.

Önce­likle bir font oluşturalım:

• İlk önce ken­di­nize kul­la­na­ca­ğı­nız güzel bir font bulun, benim şimdiye kadar gör­dü­ğüm en geniş Cufon font arşivi şurada.
• Daha sonra Cufón’un resmi web site­sinde yer alan Gene­ra­tor say­fa­sına gidin.
• Daha sonra aşa­ğı­daki resimde gör­dü­ğü­nüz bölüme gidin ve cho­ose file diye­rek kul­la­na­ca­ğı­nız font dos­ya­sını seçin.

Bu adımı tamam­la­ma­dan önce en alt­taki kutu­cuğu işa­ret­le­meyi unutmayın!

Res­min altında yer alan açık­la­mada da yaz­dı­ğım gibi The EULA… şeklinde devam eden kutu­cuğu işa­ret­le­meyi unut­ma­yın. Say­fa­nın deva­mında yer alan diğer ayar­ları yap­mak size kal­mış, ve son ola­rak “I ack­no­w­ledge and accept these terms” kutu­cu­ğunu da işa­ret­le­yin ve “Let’s do this!” buto­nuna tık­la­yın. Bu adım­lar­dan sonra size bir dosya verecek (indir­di­ği­niz dosya bir JavaSc­ript dos­ya­sı­dır). Bu yazıda kul­la­nı­la­cak örnek ola­rak vera.font.js seç­tim ben.

Şimdi fon­tu­muzu indir­dik, fakat Cufon özel­li­ği­nin çalış­ması için bize bir script lazım, bu script de Cufon’un resmi web site­sinde yer alan Down­load buto­nuna sağ tık­la­yıp farklı kay­det diye­rek indi­re­bi­lir­si­niz. İndi­re­ce­ği­niz o dos­ya­nın ismi de cufon-yui.js şeklinde ola­cak.

Artık bu iki­sine sahip oldu­ğu­muza göre işin HTML kıs­mına geçe­bi­li­riz. Her iki dos­yayı da sunu­cu­nuza yük­le­yin ve tasa­rı­mı­nızda head eti­ke­tin­den hemen önce­sine şu kod­ları ekleyin.

<script type="text/javascript" src="cufon-yui.js"></script><script type="text/javascript" src="vera.font.js"></script><script type="text/javascript">Cufon.replace('h2');</script>

Yuka­rıda yer alan Cufon.replace kodu web site­nizde Cufon’un hangi baş­lığa ata­na­ca­ğını belir­ler, ben h1 kul­lan­dım, siz h2, h3, h4 gibi diğer baş­lık­lara da bu özel­liği atayabilirsiniz.

İşte bu kadar, artık Cufón özel­liği h1 eti­ke­ti­nizde kul­la­nımda ola­cak, şunu da unut­ma­yın ki Cufon’un sIFR’dan bazı fark­ları var, bun­ları da siz­lere uzun uzun anlat­ma­ya­yım, çünkü Eren Emre oldukça güzel bir anla­tım yap­mış: http://erenemre.com/295

Ancak yazı İngilizce’dir. Fakat yazı­nın en önemli kısmı olan son parag­ra­fını Türkçe’ye çevirdim:

Cufón daha iyi görü­nü­yor. Hepi­miz bili­yo­ruz ki sIFR daha eski ama hâlâ daha çok kilo­bayt ve HTTP isteği yiyor. Aynı zamanda dönüş­türme (ren­de­ring) süresi Cufón’a göre daha yavaş. sIFR yazı­ları sayfa yük­len­dik­ten sonra dönüş­tü­rü­yor. Yani bu fak­tör­ler Cufón’un lider­liği alma­sına yar­dımcı oluyor.

Artık bu özel­liği kul­la­nıp kul­lan­ma­mak size kal­mış.